为 何 写作 本 书 


宣布 
中 的 


2014 年 10 月 28 日 ，W3C 的 HTML 工 作 组 正式 发 布 了 HTML 5 的 正式 推荐 标准 (W3C Recommendation) ， 这 一 消息 是 W3C 在 美国 圣 克拉 拉 举 行 的 W3C 技 术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 


的 。HTML 5 在 这 一 版 本 中 增加 了 支持 Web 应 用 开发 者 的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 


互 操作 性 。HTML 5 是 构建 开放 Web 平 台 的 核心 。 


2015 年 4 月 9 日 ，W3C 的 CSS 工 作 组 发 布 CSS 基 本 用 户 接口 模块 (CSS Basic User Interface Module Level 3, CSS3 UI) 


样式 处 理 所 需 的 与 用 户 界面 相关 的 CSS 选 择 器 (selectors) 、 属 性 及 属性 值 。 它 包含 并 扩展 了 在 CSS Level 2 及 Selector 规 范 中 定义 的 与 用 户 接 口 有 关 的 特性 。 


的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 用 户 代理 (浏览 器 ) 


的 标准 工作 草案 。 该 文档 描述 了 CSs 3 中 对 HTML、XML (包括 XHTML) 进行 


HTML 5 带 来 了 一 组 新 的 用 户 体验 ， 如 Web 的 音频 和 视频 不 再 需要 插件 ， 通 过 Canvas 更 灵活 地 完成 图 像 绘 制 ， 而 不 必 考虑 


幕 的 分 辩 率 ， 浏 览 器 对 可 扩展 矢量 


的 本 地 支持 ， 通 过 引入 新 的 注释 信息 以 增强 对 东亚 文字 呈现 (Ruby) 的 支持 ， 对 富 Web 应 用 信息 无 障碍 新 特性 的 支持 ， 等 等 。 


以 及 与 之 相伴 的 CSS 3 技术 ， 早 日 运用 这 些 技术 开发 出 一 个 具有 现代 水 平 的、 在 未 来 的 Web 平 台 上 正常 运行 的 Web 网 站 或 Web 应 


前 端 技术 将 进入 一 个 靳 新 的 时 代 ， 至 少 已 经 开启 了 这 扇 门 。 


在 这 种 局 势 下 ， 学 习 HTML 5 无 疑 成 为 Web 开 发 者 的 一 大 重要 任务 ， 谁 先 学 会 HTML 5， 谁 就 掌握 了 开启 未 来 Web 平 台 的 一 把 钥匙 。 因 


网 


(SVG) 和 数学 标记 语言 (MathML) 


第 3 版 与 第 2 版 的 区 别 


之 间 
CSS 


程序 。 


此 ， 笔 者 希望 借助 此 书 帮 助 国内 的 Web 开 发 者 更 好 地 学 习 HTML 5 


自 2013 年 上 半年 本 书 第 2 版 出 版 以 来 ， 一 直 受 到 广大 读者 的 欢迎 ， 笔 者 在 这 里 首先 感谢 广大 读者 的 支持 。 自 本 书 第 2 版 出 版 之 后 ，HTML 5 与 CSS 3 标准 处 于 不 断 发 展 中 ， 各 主流 浏览 器 也 以 最 快 的 速度 
对 HTML 5 中 各 种 最 新 公布 的 API 提 供 了 支持 ， 其 中 包括 各 种 新 增 元 素 、WebRTC 通 信 API、 鼠 标 指针 锁定 API、Javascript Promise 等 。 因 


HTML 5 中 新 增 的 各 种 元 素 及 API 的 介绍 ， 同 时 更 新 各 主流 浏览 器 对 CSS 3 的 最 新 支持 情况 ， 以 使 读者 能 够 学 到 2015 稀 


3 标准 的 支持 情况 ， 能 够 早日 通过 这 些 新 知识 打造 一 个 HTML 5 时 代 功 能 强大 的 Web 网 站 或 Web 应 用 程序 。 


体 来 说 ， 本 书 在 第 2 版 的 基础 上 做 出 了 如 下 主要 修改 : 


. 第 2 章 中 新 增 部 分 HTML 5 属性 。 

- 第 3 章 中 新 增 对 main 元 素 的 介绍 ， 移 除 第 2 版 中 对 hgroup 元 素 (HTML 5 标准 中 已 废除 该 元 素 ) 的 介绍 。 

.第 4 章 中 新 增 对 dialog 元 素 的 介绍 。 

- 第 5 章 (第 2 版 中 第 6 章 ) 中 新 增 “ 使 用 Path2D 对 象 绘制 路 径 ” 和 “图 形 、 图 像 的 组 合 与 混合 ”的 内 容 。 

“ 第 6 章 (第 2 版 中 的 第 15 章 ) 中 新 增 “ 对 音频 或 视频 添加 字幕 ”内 容 。 

“ 第 10 章 中 新 增 “ 在 IndexedDB 数 据 库 中 保存 Blob 对 象 ” 内 容 。 

- 新 增 第 12 章 对 WebRTC 通 信 的 介绍 。 

- 第 17 章 (第 2 版 中 的 第 16 章 ) 中 新 增 “ 和 鼠标 指针 锁定 API”、“requestAnimationFrame”、“Mutation Observer”、 
: 第 21 章 中 新 增 “ 使 用 rem 单 位 定义 字体 大 小 ”内 容 。 


“ 第 22 章 中 新 增 “ 创 建 侈 内 阴影 ”内 容 。 


“ 第 23 章 中 新 增 “ 新 增 的 用 于 平 铺 背 景 图 像 的 选项 一 space 与 round” 和 “使 用 渐变 色 背 景 ”内 容 。 


“ 第 24 章 中 新 增 “ 使 用 3DD 变 形 功能 ”及 “变形 矩阵 ”内 容 。 
“ 第 26 章 中 根据 CSS 3 最 新 标准 的 内 容重 新 编写 “弹性 金 布 局 ”并 新 增 “calc 方 法 ”内 容 。 


. 第 28 章 中 新 增 “ 实 现 CSS 3 中 的 滤 镜 特效 ”内 容 。 


本 书面 向 的 读者 


本 书 主要 适合 如 下 人 群 阅读 : 
- 具有 一 定 基 础 的 Web 前 端 开 发 工程 师 。 
- 具有 一 定 美 术 功 底 的 Web 前 端 设计 师 和 UI 设 计 师 。 
:Web 项 目的 项 目 管理 人 员 。 


“ 开设 Web 开 发 等 相关 专业 的 高 等 院 校 的 师 生 和 相关 培训 机 构 的 学 员 及 教师 。 


如 何 阅读 本 书 


以 帮 
细 使 


本 书 共 分 为 上 下 两 册 。 


上 册 对 HTML 5 中 新 增 的 语法 、 标 记 方 法 、 元 素 、AP1， 以 及 这 些 元 素 与 API 到 
助 读者 更 好 地 理解 为 什么 需要 使 用 HTML 5、 使 用 HTML 5 有 什么 好 处 、HTML 5 中 究竟 增加 了 哪些 目前 HTML 4 不 


“JavaScript 


前 为 止 受到 了 哪些 浏览 器 支持 等 进行 详细 介绍 


此 ， 本 书 以 第 2 版 的 内 容 为 基础 ， 添 加 对 2013 上 半年 到 2015 年 5 月 
FE5 月 为 止 关于 HTML 5 与 CSS 3 标准 的 各 种 知识 ， 了 解 各 种 最 新 浏览 器 对 HTML 5 与 


Promise”、 “Beacon API” 内 容 。 


。 在 对 它们 进行 介绍 的 同时 将 其 与 HTML 4 中 的 各 种 元 素 与 功能 进行 对 比 ， 


备 而 在 第 


代 Web 平 台 上 将 会 起 到 重要 作 


方法 。 


下 册 详 细 介 绍 了 CSS 3 中 各 种 新 增 样式 与 属性 ， 其 中 主要 包括 CSS 3 中 的 各 种 选择 器 、 文 字 与 字体 、 背 景 与 边框 、 各 种 盒 模型 、CSS 3 中 的 布局 方式 、CSS 3 中 


的 功能 与 API， 以 及 这 些 功 能 与 API 的 详 


变形 与 动画 、CSS 3 中 与 媒体 类 型 相关 的 


一 些 样式 与 属性 等 。 同 时 详细 讲述 了 这 些 样式 与 属性 到 目前 为 止 受 到 了 哪些 浏览 器 支持 ， 以 及 针对 不 同 浏览 器 应 该 怎样 在 样式 代码 中 正确 使 用 各 种 属性 。 最 后 详细 讲解 了 两 个 实例 ， 第 一 个 实例 展示 了 如 何 
在 一 个 用 HTML 5 语言 编写 而 成 的 页 面 中 综合 运用 HTML 5 中 新 增 的 各 种 结构 元 素 ， 如 何 对 这 些 结构 元 素 综合 使 用 CSS 3 样式 ; 第 二 个 实例 展示 了 如 何 使 用 HTML 5 中 新 增 的 表单 元 素 以 及 操作 本 地 数据 库 的 
功能 来 实现 一 个 具有 现代 风格 的 Web 应 用 程序 ， 如 何在 这 个 由 HTML 5 语言 编写 而 成 的 Web 应 用 程序 中 综合 使 用 CSS 3 样式 来 完成 页 面 的 布局 以 及 视觉 效果 的 美化 工作 。 


全 书 一 共 包 含 389 个 代码 示例 ， 每 个 代码 示例 都 经 过 笔者 上 机 实践 ， 确 保 运行 结果 正确 无 误 。 每 个 代码 示例 的 详细 代码 及 其 用 到 的 脚本 文件 、 各 种 资源 文件 都 可 在 华章 公司 的 官方 网 站 
(www.hzbook.com) 的 本 书页 面 上 下 载 ， 因 为 是 用 HTML 5 编写 而 成 的 网 页 ， 所 以 可 直接 在 各 种 浏览 器 中 打开 并 查看 运行 结果 (少量 页 面 需要 先 建立 网 站 ， 然 后 通过 访问 网 站 中 该 页 面 的 方式 进行 查看 ; 
少量 页 面 使 用 服务 器 端 PHP 脚 本 语言 ， 可 在 Apache 服 务 器 中 运行 ;少量 页 面 使 用 服务 器 端 Nodejs 脚 本 语言 ， 可 以 通过 安装 运行 Node.js 来 运行 服务 器 并 查看 示例 页 面 ) 。 同 时 ， 对 于 HTML 5 中 的 各 种 元 素 

和 各 种 AP1， 以 及 CSS 3 中 的 各 种 属性 与 样式 受到 了 哪些 浏览 器 的 支持 在 书 中 都 进行 了 详细 介绍 ， 读 者 可 以 针对 不 同 的 页 面 选 择 正确 的 浏览 器 来 查看 其 正确 的 运行 结果 。 


致谢 


在 本 书 的 写作 过 程 中 ， 机 械 工业 出 版 社 华章 公司 的 编辑 杨 福 川 先生 和 姜 影 女士 给 予 了 很 大 的 帮助 和 支持 ， 并 提出 了 很 多 中 肯 的 建议 ， 在 此 表示 感谢 。 同 时 ， 还 要 感谢 机 械 工业 出 版 社 的 所 有 编审 人 员 为 
本 书 的 出 版 所 付出 的 辛勤 劳动 。 本 书 的 成 功 出 版 是 大 家 共同 努力 的 结果 ， 谢 谢 他 们 。 


另外 ， 在 本 书 的 写作 过 程 当中 ， 由 于 时 间 及 个 人 水 平 上 的 原因 ， 有 可 能 存在 一 些 对 HTML 5 及 CSS 3 认识 不 全 面 或 疏漏 的 地 方 ， 敬 请 读者 批评 指正 ， 作 者 的 联系 QQ 为 240824399， 联 系 邮箱 为 
240824399@ qq.com， 谨 以 最 真诚 的 心 希望 能 与 读者 共同 交流 、 共 同 成 长 。 


第 18 章 CSS 3 概述 


从 2010 年 开始 ，HTML 5 与 CSS 3 就 一 直 是 互联 网 技术 中 最 受 关注 的 两 个 话题 。2010 年 MIX10 大 会 上 微软 的 工程 师 在 介绍 IE9 时 ， 从 前 端 技术 的 角度 把 互联 网 的 发 展 分 为 三 个 阶段 : 第 一 阶段 是 Web 1.0 
的 以 内 容 为 主 的 网 络 ， 前 端 主流 技术 是 HTML 和 CSS; 第 二 阶段 是 Web 2.0 的 Ajax 应 用 ， 热 门 技术 是 JavaScript/DOM/ 异 步 数据 请 求 ; 第 三 阶段 是 即将 迎 来 的 HTML 5+CSS 3 的 时 代 ， 这 两 者 相辅相成 ， 使 
互联 网 又 进入 了 一 个 产 新 的 时 代 。 


本 章 将 对 CSS 3 进行 一 个 全 面 的 、 概 要 的 介绍 ， 使 大 家 对 CSS 3 有 一 个 初步 的 、 总 体 上 的 认识 。 


“ 掌握 CSS 3 的 基础 知识 ， 知 道 什 么 是 CSS 3， 了 解 CSS 3 的 发 展 历史 。 
“ 掌握 CSS 3 的 模块 化 结构 ， 了 解 CSS 3 中 包含 了 哪些 结构 。 


"了解 CSS 3 与 CSS 2 有 什么 主要 区 别 ， 了 解 CSS 3 将 对 下 一 代 Web 平 台 上 的 界面 设计 做 出 哪些 重大 贡献 。 


181 概要 介绍 


18.1.1 CSS 3 是 什么 


首先 ， 我 们 对 CSS 3 做 一 个 概要 的 介绍 。 什 么 是 CSS 3? CSS 3 是 CSs 技 术 的 一 个 升级 版 本 ， 是 由 Adobe Systems. Apple. Google. HP. IBM. Microsoft. Mozilla, Opera. Sun Microsystems 等 
许多 Web 界 的 巨头 联合 组 成 的 一 个 名 为 “CSS Working Group” 的 组 织 共 同 协商 策划 的 。 虽 然 目前 很 多 细节 还 在 讨论 之 中 ， 但 它 还 是 不 断 地 朝 前 发 展 着 。2010 年 在 HTML 5 成 为 |T 界 人 士 关注 的 焦点 的 同 
时 ， 它 也 开始 慢 慢 地 普及 开 来 。 


182 ”使 用 CSS 3 能 做 什么 


18.2.1 ”模块 与 模块 化 结构 


ECSS 3 中 ， 并 没有 采用 总 体 结构 ， 而 是 采用 了 分 工 协作 的 模块 化 结构 ， 这 些 模块 如 表 18-1 所 示 。 


表 18-1 CSS 3 中 的 模块 


模块 名 称 功能 描述 
basic box model 定义 各 种 与 盒 相 关 的 样式 
Line 定义 各 种 与 直线 相关 的 样式 
Lists 定义 各 种 与 列表 相关 的 样式 
Hyperlink Presentation 定义 各 种 与 超 链接 相关 的 样式 。 壁 如 销 的 显示 方式 、 激 活 时 的 视觉 效果 等 
Presentation Levels 定义 页 面 中 元 素 的 不 同 的 样式 级 别 


Speech 定义 各 种 与 语音 相关 的 样式 。 璧 如 音量 、 音 速 、 说 话 间歇 时 间 等 属性 


模块 名 称 
Backeround and border 
Text 
Color 
Font 
Paged Media 
Cascading and inheritance 
Value and Units 
Image Values 
2D Transforms 


3D Transforms 


NS 
St 


功能 描述 
定义 各 种 与 背景 和 边框 相关 的 样式 
定义 各 种 与 文字 相关 的 样式 
定义 各 种 与 颜色 相关 的 样式 
定义 各 种 与 字体 相关 的 样式 
定义 各 种 页 眉 、 页 脚 、 页 数 等 页 面 元 数据 的 样式 
定义 怎样 对 属性 进行 赋值 
将 页 面 上 各 种 各 样 的 值 与 单位 进行 统一 定义 ， 以 供 其 他 模块 使 用 
定义 对 image 元 素 的 赋值 pa 
在 页 面 中 实现 2 维 空间 上 的 变形 效果 
在 页 面 中 实现 3 维 空间 上 的 变形 效果 


Transitions 在 页 面 中 实现 平滑 过 渡 的 视觉 效果 

Animations 在 页 面 中 实现 动画 

CSSOM View 查看 管理 页 面 或 页 面 的 视觉 效果 ， 处 理 元 素 的 位 置信 息 

Bia 定义 CSS 样式 表 的 基本 结构 、 样 式 表 中 的 一 些 语法 细节 、 浏 览 器 对 于 样 


式 表 的 分 析 规 则 
定义 怎样 在 元 素 中 插入 内 容 
定义 当 一 些 元 素 的 内 容 太 大 ， 超 出 了 指定 的 元 素 尺寸 时 ， 是 否 以 及 怎样 


Generated and Replaced Content 


Mar ， 

SR 显示 溢出 部 分 
Ruby 定义 页 面 中 ruby 元 素 (用 于 显示 拼音 文字 ) 的 样式 
Writing Modes 定义 页 面 中 文本 数据 的 布局 方式 


定义 在 屏幕 、 纸 张 上 进行 输出 时 页 面 的 泻 染 方式 
Namespaces 定义 使 用 命名 空间 时 的 语 沪 

根据 媒体 类 型 来 实现 不 同 的 样式 
定义 用 于 屏幕 阅读 器 之 类 的 阅读 程序 时 的 样式 
在 页 面 中 使 用 多 栏 布 局 方式 


Basic User Interface 


Media Queries 
“Reader ”Media Type 


Multi-column Layout 


Template Layout 在 页 面 中 使 用 特殊 布局 方式 
Flexible Box Layout 创建 自 适应 浏览 器 窗口 的 流动 布局 或 自 适 应 字体 大 小 的 弹性 布局 
Grid Position 在 页 面 中 使 用 网 格 布局 方式 


Generated Content for Paged Media 在 页 面 中 使 用 印刷 时 使 用 的 布局 方式 


那么 ， 为 什么 需要 分 成 这 么 多 模块 来 进行 管理 呢 ? 


这 是 为 了 避免 产生 浏览 器 对 于 某 个 模块 支持 不 完全 的 情况 。 如 果 只 有 一 个 总 体 结构 ， 这 个 总 体 结构 会 过 于 庞大 ， 在 对 其 支持 的 时 候 很 容易 造成 支持 不 完全 的 情况 。 如 果 把 总 体 结构 分 成 几 个 模块 ， 各 浏 
览 器 可 以 选择 对 于 哪个 模块 进行 支持 、 对 哪个 模块 不 进行 支持 ， 支 持 的 时 候 也 可 以 集中 把 某 一 个 模块 全 部 支持 完了 再 支持 另 一 个 模块 ， 以 减少 支持 不 完全 的 可 能 性 。 


例如 ， 台 式 计 算 机 、 笔 记 本 和 手机 上 用 的 浏览 器 应 该 针对 不 同 的 模块 进行 支持 。 如 果 采 用 模块 分 工 协作 的 话 ， 不 仅 是 台式 计算 机 ， 各 种 设备 上 所 用 的 浏览 器 都 可 以 选用 不 同 模块 进行 支持 。 


第 19 章 ”选择 器 


本 章 针对 CSS 3 中 使 用 的 各 种 选择 器 进行 详细 介绍 ， 通 过 选择 器 的 使 用 ， 你 不 再 需要 在 编辑 样式 时 使 用 多 余 的 以 及 没有 任何 语义 的 class 属 性 ， 而 是 直接 将 样式 与 元 素 绑 定 起 来 ， 从 而 节省 大 量 在 网 站 或 
Web 应 用 程序 已 经 完成 之 后 修改 样式 时 所 需 花费 的 时 间 。 


学 习 内 容 : 
“ 掌握 CSS 3 中 使 用 的 选择 器 的 基本 概念 。 知 道 什 么 是 选择 器 以 及 为 什么 需要 使 用 选择 器 ， 使 用 选择 器 有 什么 好 处 。 
- 掌握 CSS 3 中 的 各 种 属性 选择 器 的 概念 以 及 使 用 方法 ， 其 中 包括 : 


* [att=va]] 选 择 器 


19.1 


篇 CSS 代 码 之 中 ， 并 没有 说 明 什么 样式 服务 了 


[attk=vall 选 择 器 


“ [att^=va]] 选 择 器 


© ри$=улй& 8 


“ 掌握 CSS3 中 的 各 种 结构 性 伪 类 选择 器 的 概念 以 及 使 用 方法 ， 其 中 包括 : 


тоо 
“not 选择 器 
empty 选择 器 


` target 选 择 器 


< first-child 选 择 器 


last-child 选 择 器 


` nth-child 选 择 器 


+ nth-last-child 选 择 器 


+ nth-of-type 选 择 器 


* nth-last-of-type 


“only-child 选 择 


选择 器 


器 


“ 掌握 CSS3 中 的 各 种 UI 元 素 状态 伪 类 选择 器 的 概念 以 及 使 用 方法 ， 其 中 包括 : 


* Е: hover 选 择 


* E: active 选 择 


器 


器 


E: focus 选 择 器 


E: enabled 选 择 器 


< E: disabled 选 择 器 


5 Б: read-only 选 择 器 


“已: read-write 选 择 器 


* E: checked 选 择 器 


Е: default 选 择 器 


+ E: indeterminate 选 择 器 


E: : selection 选 择 器 


"E: invalid 选 择 器 


Е: valid 选 择 器 


* Е: required 选 择 器 


* E: optional 选 择 器 


* Е: in-range 选 择 器 


E: out-of-range 选 择 器 


+ 掌握 CSS3 中 的 通用 兄弟 元 素 选择 器 的 概念 以 及 使 用 方法 。 


选择 器 概述 


选择 器 是 CSS 3 中 一 个 重要 的 内 容 。 使 用 它 可 以 大 幅度 提高 开发 人 员 书 写 或 修改 样式 表 时 的 工作 效率 。 


在 样式 表 中 ， 一 般 会 书写 大 量 的 代码 ， 在 大 型 网 站 中 ， 样 式 表 中 的 代码 可 能 会 达到 几 干 行 。 麻 烦 的 是 ， 当 整个 网 站 或 整个 Web 应 用 程序 全 部 书写 好 之 后 ， 需 要 针对 样式 表 进 行 修改 时 ， 在 洋洋 酒 酒 一 大 


为 CSS 样 式 服务 ， 属 于 多 余 属 性 ; 第 二 ， 使 用 class 


的 ， 


种 


修改 样式 时 也 很 不 


所 以 ， 在 CSs 3 中 ， 


方便 。 


提倡 使 用 选择 器 来 将 样式 与 元 素 直 接 绑 定 起 来 ， 这 样 的 话 ， 在 样式 表 中 什么 样式 与 什么 元 素 相 


属性 的 话 ， 并 没有 把 样式 与 元 素 绑 定 起 来 ， 针 对 同一 个 class 


FF 什么 元 素 ， 只 是 使 用 了 class 属 性 ， 然 后 在 页 面 中 指定 了 元 素 的 class 
EA 


属性 。 但 是 ， 使 用 元 素 的 class 属 性 有 两 个 缺点 : 第 一 ，class 属 性 本 身 没有 语义 ， 它 纯粹 用 来 
性 ， 文 本 框 也 可 以 使 用 ， 下 拉 框 也 可 以 使 用 ， 甚 至 按钮 也 可 以 使 用 ， 这 样 其 实 是 非常 混乱 


杂 的 指定 ， 同 时 也 


体 来 说 ,使 


选择 器 进行 样式 指定 时 ， 采 


能 大 量 减 少 样式 表 的 代码 书 


写 量 ， 最 终 书写 出 来 的 样式 表 也 变 得 简洁 明了 。 


类 似 E[foo$= "val"] 这 种 正则 表达 式 的 形式 。 在 样式 中 ， 声 明 该 样式 应 用 于 什么 元 素 ， 该 元 素 的 某 个 属性 的 属性 值 必须 是 什么 。 例 如 ， 我 们 可 以 指定 将 页 面 


匹配 变 得 一 目 了 然 ， 修 改 起 来 也 很 方便 。 不 仅 如 此 ， 通 过 选择 器 ， 我 们 还 可 以 实现 各 


中 id 为 “div_Big” 的 div 元 素 的 背景 色 设 定 为 红色 ， 


代码 如 下 所 示 。 


div[id="div_Big"] (background: red;) 


这 样 ， 符 合 这 个 条 件 (id 为 “div_Big”) 的 div 元 素 的 背景 色 被 设 为 红色 ， 不 符合 这 个 条 件 的 div 元 素 不 使 


另外 
下 所 示 。 


这 个 样式 。 


， 我 们 还 可 以 在 指定 样式 时 使 


“^” 通 配 符 (开头 字符 匹配 ) 、 


“? ”通配符 (结尾 字符 匹配 ) 与 “*” 通配符 (包含 字符 匹配 ) 。 如 指定 id 末尾 字母 为 “t” 的 div 元 素 的 背景 色 为 蓝 色 ， 代 码 如 


div[id$="t"] (background: red;) 


使 


19.2 


19.2.1 


在 HTML 中 ， 通 过 各 种 各 样 的 


通配符 能 大 大 提高 样式 表 的 书写 效率 。 


属性 选择 器 


来 控制 这 个 div 元 素 的 内 容 和 状态 。 


接 下 来 ， 我 们 在 代码 清单 19-1 中 看 一 个 HTML 页 面 ， 该 页 面 中 包含 一 些 div， 每 个 div 之 间 


代码 清单 19-1 


一 个 具有 很 多 div 元 素 的 页 面 


属性 ， 我 们 可 以 给 元 素 增加 很 多 附加 信息 。 例 如 ， 通 过 width 属 


с. 


性 ， 我 们 可 以 指定 div 元 素 的 宽度 ， 通 过 i 


= 


属性 进行 区 分 。 


属性 ， 我 们 可 以 将 不 同 的 div 元 素 进 行 


区 分 ， 并 且 通 过 JavaScript 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
</head> 


<div 
<div 
<div 
<div 
<div 
<div 


id="section1"> 示 例文 本 1</div> 
id="subsection1-1"> 示 例文 本 1-1</div> 
id="subsection1-2"> 示 例文 本 1-2</div> 
id="section2"> 示 例文 本 2</div> 
id="subsection2-1"> 示 例文 本 2-1</div> 
id="subsection2-2"> 示 例文 本 2-2</div> 


接 下 来 ， 我 们 回顾 一 下 CSS 2 中 对 div 元 素 使 


<style type="text/css"> 
.divYellow{background: yellow} 
</style> 


样式 的 方法 ， 如 果 要 将 id 为 “section1” 的 div 元 素 的 背景 色 设 定 为 黄色 ， 我 们 首先 追加 样式 ， 如 下 所 示 。 


然后 指定 id 为 “section1” 的 这 个 div 元 素 的 class 属 性 ， 如 下 所 示 。 


<div id="section1" class="divYellow"> 示 例文 本 1</div> 


接 下 来 ,我 们 看 一 下 CSS2 中 如 何 使 


使 


属性 选择 器 时 ， 需 


属性 选择 器 来 实现 同样 的 处 理 。 


声明 属性 与 属性 值 ， 声 明 方法 如 下 所 示 。 


[att=val] 


其 中 att 代 表 属 性 ，val 代 表 属 性 值 。 例 如 ， 要 将 id 为 “section1” 的 div 元 素 的 背景 色 设 定 为 黄色 ， 我 们 只 要 在 代码 清单 19-1 中 加 入 如 下 所 示 的 样式 代码 即 可 。 


<style type="text/css"> 
[id=section1] { 
background-color: yellow; 


</style> 


最 后 ， 我 们 在 代码 19-2 中 完整 地 看 一 下 使 


代码 清单 19-2 使 用 CSS 2 的 


CSS 2 的 属性 选择 器 的 示例 代码 ， 在 本 节 中 接 下 来 的 部 分 都 只 会 针对 这 个 示例 中 的 样式 代码 进行 修改 ， 其 他 部 分 不 做 修改 。 


属性 选择 器 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtm1l1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 


<sty. 
[id= 


le type="text/css"> 
section1] { 


background-color: yellow; 


) 
</style> 
</head> 


<div 
<div 
<div 
<div 
<div 
<div 


id="sectionl" class="divYellow"> 示 例 


id="subsection1-1"> 示 例文 本 1-1</div> 
id="subsection1-2"> 示 例文 本 1-2</div> 
id="section2"> 示 例文 本 2</div> 

id="subsection2-1"> 示 例文 本 2-1</div> 
id="subsection2-2"> 示 例文 本 2-2</div> 


文本 1</div> 


追加 了 这 个 


属性 选择 器 后 的 运行 结果 如 图 19-1 所 示 。 


= н k. 
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图 19-1 使 用 CSS 2 的 属性 选择 器 的 示例 


19.3 ”结构 性 伪 类 选择 器 


本 节 介 绍 CSS 3 中 的 结构 性 伪 类 选择 器 ， 在 介绍 结构 性 伪 类 选择 器 之 前 ， 先 来 介绍 一 下 CSS 中 的 伪 类 选择 器 及 伪 元 素 。 


194 ”UI 元 素 状 态 伪 类 选择 器 


在 CSS 3 的 选择 器 中 ， 除 了 结构 性 伪 类 选择 器 外 ， 还 有 一 种 Ul 元 素 状态 伪 类 选择 器 。 
这 些 选 择 器 的 共同 特征 是 : 指定 的 样式 只 有 当 元 素 处 于 某 种 状态 下 时 才 起 作用 ， 在 默认 状态 下 不 起 作用 。 


在 CSS 3 中 ， 共 有 17 种 UI 元 素 状 态 伪 类 选择 器 ， 分 别 是 E: hover, E: active. E: focus. E: enabled. E: disabled. E: read-only, E: read-write, E: checked. E: default. E: 


indeterminate, Е: : selection. E: invalid, Е: valid. E: required. E: optional. Е: in-range, 以 及 out-of-range。 
到 目前 为 止 ， 这 17 种 选择 器 被 浏览 器 的 支持 情况 如 表 19-1 所 示 。 


表 19-1 各 UI 元 素 状 态 伪 类 选择 器 受 浏 览 器 的 支持 情况 


m 


TRE Chrome 


E:hover — ЖЕБЕ j ЕНЕ ИШЕ: АШИ М 
E'active V V 
E: focus V 
E:enabled V 
E disabled V 


II 
WI 
Ili 
| 
< 


E:read-only 
E:read-write 
E:checked 
E::selection 
E:default 


E:indeterminate 


x 


І 


| 
| 
| 
< 


E:invalid V 
E:valid V V 
E:required V V 
E:optional У Ух У 


E:in-range 


Е:ош-оЁтапре | У 


< 


19.5 ”通用 兄弟 元 素 选 择 器 


关于 选择 器 部 分 ， 最 后 要 介绍 的 一 个 选择 器 是 通用 兄弟 元 素 选择 器 ， 它 用 来 指定 位 于 同一 个 父 元 素 之 中 的 某 个 元 素 之 后 的 所 有 其 他 某 个 种 类 的 兄弟 元 素 所 使 用 的 样式 。 它 的 使 用 方法 如 下 所 示 。 


< 子 元 素 > ~< 子 元 素 之 后 的 同 级 兄弟 元 素 > { 
// 指定 样式 
) 


这 里 的 同 级 是 指 子 元 素 和 兄弟 元 素 的 父 元 素 是 同一 个 元 素 。 


代码 清单 19-28 为 一 个 通用 兄弟 元 素 选择 器 的 使 用 示例 ， 该 示例 中 对 所 有 div 元 素 之 后 的 ， 与 div 元 素 处 于 同 级 的 p 元 素 指定 其 背景 色 为 绿色 ， 但 是 对 div 元 素 内 部 的 p 元 素 的 背景 色 不 做 指定 


代码 清单 19-28 ”通用 兄弟 元 素 选 择 器 的 使 用 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm1l1/DTD/xhtm1l1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
div ~ p {background-color :#00FF00; } 
</style> 
<title> 通 用 兄弟 元 素 选 择 器 EE ~ F</title> 
</head> 
<body> 
<div> 
<div> 
<p>p 元 素 为 div 元 素 的 子 元 素 </p> 
<p>Pp 元 素 为 div 元 素 的 子 元 素 </p> 
</div> 
<hr /> 
<p>P 元 素 为 div 元 素 的 兄弟 元 素 </p> 
<p>P 元 素 为 div 元 素 的 兄弟 元 素 </p> 
<hr /> 
<p>Pp 元 素 为 div 元 素 的 兄弟 元 素 </p> 
<hr /> 


<div>p 元 素 为 div 元 素 的 子 元 素 </div> 
<hr /> 

<p>P 元 素 为 div 元 素 的 兄弟 元 素 </p> 
</div> 

</body> 

</html> 


这 段 代 码 的 运行 结果 如 图 19-37 所 示 。 


Firefox “ 
(D SARSAR E ~ F p "Ст 
€ > - с + | 口 fleyWFVHTML5CSS3/html/ 通 用 兄 羊 元 素 选 择 器 html үү -| [$ Google 


p 元 素 为 div 元 素 的 子 元 素 
i | p 元 素 为 div 元 素 的 子 元 素 


919-37 通用 兄弟 元 素 选择 器 的 使 用 示例 


第 20 章 ”使 用 选择 器 在 页 面 中 插入 内 容 


在 19.3.1 节 中 介绍 CSS 中 的 伪 元 素 时 ,我 们 曾经 介绍 过 ， 在 CSS 中 可 以 使 用 before 伪 元 素 选择 器 与 after 伪 元 素 选择 器 在 页 面 中 的 元 素 的 前 面 或 后 面 插入 内 容 ， 而 插入 的 内 容 是 用 content 属 性 来 定义 的 。 
确切 地 说 ，before 伪 元 素 选择 器 与 after 伪 元 素 选 择 器 是 在 CSS 2.0 中 添加 的 ,但 是 从 CSS 2.1 开 始 ， 一 直到 CSS 3 中 ， 都 不 断 地 在 针对 这 两 个 选择 器 进行 改良 和 扩展 ， 这 使 得 before 伪 元 素 选 择 器 与 after 伪 元 
素 选择 器 的 作用 越 来 越 强 大 ， 因 此 本 章 将 特别 针对 这 两 个 选择 器 做 详细 的 介绍 。 


学 习 内 容 : 
“ 掌握 CSS 3 中 使 用 选择 器 在 页 面 中 插入 文字 的 方法 ， 能 够 使 用 before 选 择 器 与 after 选 择 器 在 页 面 中 元 素 的 前 面 或 后 面 插入 文字 。 
“ 掌握 CSS 3 中 使 用 选择 器 在 页 面 中 插入 图 像 的 方法 ， 能 够 使 用 before 选 择 器 与 after 选 择 器 在 页 面 中 元 素 的 前 面 或 后 面 插入 图 像 文件 。 


+ 掌握 CSS 3 中 使 用 选择 器 在 页 面 中 插入 项 目 编号 的 方法 ， 能 够 使 用 before 选 择 器 与 after 选 择 器 在 页 面 中 各 种 项 目的 前 面 或 后 面 插入 各 种 级 别 、 各 种 样式 的 项 目 编号 。 


201 ”使 用 选择 器 来 插入 文字 


20.1.1 ”使 用 选择 器 来 插入 内 容 


首先 ， 让 我 们 来 回顾 一 下 ， 在 CSS 2 中 是 如 何 使 用 样式 在 元 素 的 前 面 或 后 面 插入 内 容 的 。 


在 CSS 2 中 ， 使 用 before 选 择 器 在 元 素 前 面 插入 内 容 ， 使 用 after 选 择 器 在 元 素 后 面 插入 内 容 ， 在 选择 器 的 content 属 性 中 定义 要 插入 的 内 容 。 例 如 ， 在 如 下 所 示 的 代码 中 ， 对 h2 元 素 使 用 before 选 择 
器 ， 并 且 用 content 属 性 来 定义 在 h2 元 素 前 面 插入 的 内 容 为 “COLUMN ”文字 。 另 外 ， 当 插入 内 容 为 文字 的 时 候 ， 必 须要 在 插入 文字 的 两 旁 加 上 单 引号 或 者 双 引 号 。 


<style type="text/css"> 
h2:before ( 
content: 'COLUMN' 


} 
</style> 
<h2> 标 题 </h2> 


为 了 让 插入 的 文字 具有 美观 效果 ， 我 们 可 以 在 选择 器 中 加 入 文字 的 颜色 、 背 景色 、 文 字 的 字体 等 各 种 样式 。 代 码 清单 20-1 是 一 个 before 选 择 器 的 使 用 示例 ， 在 该 示例 中 ， 在 “标题 ”文字 前 加 
入 “COLUMN ”文字 ,在 before 选 择 器 中 ， 指 定 文字 颜色 为 白色 ， 背 景色 为 橘 色 ， 并 且 用 padding 属 性 与 margin 属 性 对 文字 周围 的 余 白 进行 适当 的 设 定 ， 同 时 ， 指 定 字体 为 “Comic Sans М5" , 


代码 清单 20-1 before 选择 器 的 使 用 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm1l1/DTD/xhtm1l1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<title> before 选 择 器 的 使 用 示例 </title> 
</head> 
<style type="text/css"> 
h2:before{ 
content: 'COLUMN'; 
color: white; 
background-color: orange; 
font-family: 'Comic Sans MS', Helvetica, sans-serif; 
padding: 1рх 5px; 
margin-right: 10px; 


} 

</style> 

<body> 
<h2> 标 题 文字 </h2> 
</body> 

</html> 


这 段 代码 的 运行 结果 如 图 20-1 所 示 。 
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图 20-1 before 选择 器 的 使 用 示例 


另外 ， 如 果 将 before 选 择 器 改 为 after 选 择 器 ， 则 将 “COLUMN” 文字 插入 到 标题 文字 的 后 面 。 


202 ”插入 图 像 文件 


20.2.1 “在 标题 前 插入 图 像 文件 


使 用 before 选 择 器 或 after 选 择 器 ， 除 了 可 以 在 元 素 的 前 面 或 后 面 插 入 文字 之 外 ， 还 可 以 插入 图 像 文件 。 插 入 图 像 时 ， 需 要 使 用 url 属 性 值 来 指定 图 像 文件 的 路 径 。 在 如 下 所 示 的 代码 中 ， 在 h2 标 题 元 素 
前 插入 了 mark.png 图 像 文件 。 


h2:before ( 
content:ur1 (mark.png); 


} 
<h2> 你 好 </h2> 


目前 Firefox、Chrome、Safari、Opera 浏 览 器 都 支持 这 种 插入 图 像 文件 的 功能 ， 在 IE8 中 只 支持 插入 文字 的 功能 ， 不 支持 插入 图 像 文 件 的 功能 。 


另外 ， 在 CSS 3 的 定义 中 还 可 以 通过 url 属 性 来 插入 音频 文件 、 视 频 文件 等 其 他 格式 的 文件 ， 但 目前 还 没有 得 到 任何 浏览 器 的 支持 。 


20.33 ”使 用 content 属 性 来 插入 项 目 编号 


前 面 两 节 中 分 别 介绍 了 利用 before 选 择 器 与 after 选 择 器 的 content 属 性 在 元 素 的 前 面 或 后 面 插入 文字 与 图 像 的 方法 ， 本 节 介 绍 当 页 面 中 具有 多 个 项 目 时 如 何 利用 这 个 content 属 性 来 在 项 目前 插入 项 目 
编号 ， 在 本 节 的 最 后 介绍 一 下 如 何 利用 这 个 content 属 性 在 字符 串 两 边 加 上 括号 。 


到 目前 为 止 ，Firefox、Chrome、Ssafari、Opera 浏 览 器 均 支 持 插入 项 目 编号 的 功能 ， 在 Internet Explorer 中 从 IE8 开 始 支持 这 个 功能 。 


第 21 章 “文字 与 字体 相关 样式 


本 章 将 针对 CSS 3 中 与 文字 、 字 体 相关 的 一 些 属性 做 详细 介绍 ， 其 中 包括 text-shadow 属 性 、word-break 属 性 、word-wrap 属 性 、Web Font 和 @font-face 属 性 ， 以 及 font-size-adjust 


' 掌握 如 何 使 用 text-shadow 属 性 给 页 面 上 的 文字 添加 阴影 效果 。 


“ 掌握 如 何 使 用 word-btre 呈 属性 让 页 面 上 的 文字 可 以 根据 自己 的 需要 来 进行 换行 ， 而 不 是 使 用 浏览 器 默认 的 换行 方式 。 


+ 掌握 如 何 使 用 word-wrap 属 性 来 让 浏览 器 在 长 单词 或 很 长 的 URL 地 址 的 中 间 进 行 换行 。 


+ 掌握 如 何 能 够 让 浏览 器 在 显示 文字 的 时 候 使 用 服务 器 端的 字体 ， 而 不 再 是 只 能 使 用 客户 端 所 安装 的 字体 。 


- 掌握 如 何 使 用 font-size-adjust 属 性 来 保证 在 修改 字体 的 时 候 不 改变 文字 的 大 小 ， 不 会 让 页 面 上 已 经 设计 好 的 布局 产生 混乱 。 


21.1 给 文字 添加 阴影 text-shadow 属 性 


21.1.1 ”text-shadow 属 性 的 使 用 方法 


在 CSS 3 中 ， 可 以 使 用 text-shadow 属 性 给 页 面 上 的 文字 添加 阴影 效果 ， 到 目前 为 止 Safari 浏 览 器 、Firefox 浏 览 器 、Chrome 浏 览 器 ， 以 及 Opera 浏 览 器 都 支持 该 功能 。 


text-shadow 属 性 是 在 CSS 2 中 定义 的 ， 在 CSs 2.1 中 删除 了 ， 在 CSs 3 的 Text 模 块 中 又 恢复 了 。text-shadow 的 使 用 方法 如 下 所 示 。 


text-shadow: length length length color 


属性 。 


在 代码 清单 21-1 中 ， 我 们 给 出 一 个 text-shadow 属 性 的 使 用 示例 。 在 该 示例 中 给 一 段 红色 文字 绘制 灰色 阴影 。 


代码 清单 21-1 text-shadow 属 性 的 使 用 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>text-shadow 属 性 的 使 用 示例 </title> 
</head> 
<style type="text/css"> 
div( 
text-shadow: 5рх 5рх 5px gray; 
color: navy; 
font-size: 50рх; 
font-weight: bold; 
font-family: ЖЖ; 
} 
</style> 
<body> 
<div> 你 好 </div> 
</body> 
</html> 


其 中 ， 前 面 三 个 length 分 别 指 阴 影 离 开 文字 的 横 方向 距离 、 阴 影 离开 文字 的 纵 方向 距离 和 阴影 的 模糊 半径 ，color 指 阴影 的 颜色 。 


其 中 阴影 离开 文字 的 横 方向 距离 和 纵 方向 距离 均 为 5 个 像素 。 


这 段 代码 的 运行 结果 如 图 21-1 所 示 。 


Firefox ™ 


图 21-1 text-shadow 属 性 的 使 用 示例 


某 些 场 合 下 可 以 通过 给 文字 添加 阴影 来 使 页 面 上 的 文字 更 加 容易 看 清楚 ， 壁 如 文字 与 背景 不 能 很 容易 地 分 辨 时 ， 或 文字 与 背景 图 像 互 相 重重 的 时 候 。 


在 代码 清单 21-2 的 示例 中 ， 文 字 被 显示 在 图 片上 面 ， 通 过 给 文字 添加 阴影 的 方法 使 它 从 背景 上 突出 显示 出 来 。 


代码 清单 21-2 使 用 阴影 突出 显示 文字 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ransitional//EN" 
"http://www.w3.org/TR/xhtm1l1/DTD/xhtm1l1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 使 用 阴影 突出 显示 文字 示例 </title> 
</head> 
<style type="text/css"> 
div( 

color: white; 

font-size: 25px; 

font-weight: bold; 

font-family: ЖЖ; 

background-image: url (sky.jpg); 

width: 140рх; 

height: 45px; 

padding: 30px 0; 

text-align: center; 

text-shadow: 3px 3px 5px black; 


} 

</style> 
<body> 
<div> 你 好 </div> 
</body> 
</html> 


这 段 代码 的 运行 结果 如 图 21-2 所 示 。 


图 21-2 使 用 阴影 突出 显示 文字 的 示例 


21.2 ”让 文本 自动 换行 一 一 word-break 属 性 


在 CSS 3 中 ， 使 用 word-break 属 性 来 让 文字 自动 换行 。 这 原来 是 Internet Explorer 中 独自 发 展 出 来 的 属性 ， 在 CSS 3 中 被 Text 模 块 采用 ， 现 在 也 得 到 了 Chrome 浏 览 器 及 Safari 浏 览 器 的 支持 。 


21.3 ”让 长 单词 与 URL 地 址 自动 换行 一 一 word-wrap 属 性 


对 于 西方 文字 来 说 ， 浏 览 器 在 半角 空格 或 连 字符 的 地 方 进 行 换行 。 因 此 ， 浏 览 器 不 能 给 较 长 的 单词 自动 换行 。 当 浏览 器 窗口 比较 窄 的 时 人 息 ， 文 字 会 超出 浏览 器 的 窗口 ， 浏 览 器 下 部 出 现 滚动 条 ， 让 用 户 
通过 拖 动 滚动 条 的 方法 来 查看 没有 在 当前 窗口 显示 的 文字 。 


但 是 ， 这 种 比较 长 的 单词 出 现 的 机 会 不 是 很 大 ， 而 大 多 数 超出 当前 浏览 器 窗口 的 情况 是 出 现在 显示 比较 长 的 URL 地 址 的 时 候 。 因 为 在 URL 地 址 中 没有 半角 空格 ， 所 以 当 URL 地 址 中 没有 连 字符 的 时 候 ， 浏 
览 器 在 显示 时 是 将 其 视 为 一 个 比较 长 的 单词 来 进行 显示 的 。 


在 CSS 3 中 ,使 用 word-wrap 属 性 来 实现 长 单词 与 URL 地 址 的 自动 换行 。word-wrap 属 性 的 使 用 方法 如 下 所 示 。 


div( 
word-wrap: break-word; 
} 


word-wrap 属 性 可 以 使 用 的 属性 值 为 normal 与 break-word 两 个 。 使 用 normal 属 性 值 时 浏览 器 保持 默认 处 理 ， 只 在 半角 空格 或 连 字 符 的 地 方 进行 换行 。 使 用 break-word 时 浏览 器 可 在 长 单词 或 URL 地 
址 内 部 进行 换行 ， 如 图 21-15 所 示 。 
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214 ”使 用 服务 器 端 字体 一 一 Web Font 与 @font-face 属 性 


的 替代 字体 ， 但 是 如 果 这 个 替代 字体 在 客户 端 中 也 没有 安装 时 ， 使 


端 中 被 安装 才能 正常 显示 ， 在 样式 表 中 人 允许 指定 


在 CSS 3 之 前 ,页面 文字 所 使 用 的 字体 必须 已 经 在 客 
这 个 字体 的 文字 就 不 能 正常 显示 了 。 


， 网 页 中 可 以 使 


使 用 i 


为 了 解决 这 个 问题 ， 在 CSS 3 中 ， 新 增 了 Web Fonts 功 能 ， 


21.5 ”修改 字体 种 类 而 保持 字体 尺寸 不 变 一 一 font-size-adjust 属 性 


前 字体 不 能 正常 显示 时 使 


安装 在 服务 器 端的 字体 ， 只 要 某 个 字体 在 服务 器 端 已 经 安装 ， 网 页 中 就 都 能 够 正常 显示 了 。 


面 中 所 有 使 用 该 字体 的 文字 大 小 都 可 能 发 生变 化 ， 从 而 使 得 原来 安排 好 的 页 面 布 


如 果 改变 了 字体 的 种 类 ， 则 页 


属性 。 使 


> 


这 


因此 ， 在 CSS 3 中 ， 针 对 这 种 情况 ， 增 加 了 font-size-adjust 


21.6 ”使 用 rem 单 位 定义 字体 大 小 


rem 单 位 来 定义 字体 大 小 。rem 字 体 尺寸 单位 将 根据 页 面 


在 CSS 3 中 ， 现 在 可 以 使 


上 的 根 元 素 (一 般 指 html 元 素 ) 的 字体 大 小 而 计算 出 实际 的 字体 大 小 。 在 过 去 ， 我 们 使 


局 产生 混乱 ， 这 是 网 页 设计 者 最 不 希望 发 生 的 一 种 状况 。 


属性 ， 可 以 在 保持 文字 大 小 不 发 生变 化 的 情况 下 改变 字体 的 种 类 。 


位 来 指定 字体 大 


D 


m. 


因 


小 ，em 单 位 根据 元 素 的 父 元 素 的 字体 大 小 而 计算 出 实际 的 字体 大 小 ， 


， 当 我 们 将 元 素 从 一 个 父 元 素 移动 到 另 一 个 父 元 素 中 时 很 可 能 使 元 素 的 实际 字体 大 小 产生 变化 。 


程序 可 以 被 运行 在 各 种 移动 设备 的 浏览 器 中 ， 所 以 我 们 应 该 意识 到 我 们 的 页 面 可 能 会 出 现 


除了 em 单位 之 外 ， 我 们 通常 也 使 用 px (像素 ) 单位 来 指定 字体 大 小 。 但 是 , 今天 ， 由 于 Web 网 站 与 Web 应 
在 各 种 尺寸 的 屏幕 上 面 。 如 果 只 依靠 像素 来 指定 字体 尺寸 ， 则 我 们 可 能 需要 根据 各 种 尺寸 的 屏幕 来 为 元 素 指定 各 种 
因此 ， 我 们 需要 使 用 rem 单 位 。 


十 的 字体 ， 这 是 一 件 非常 令 人 恼火 的 事情 。 


rem 字 体 尺寸 单位 根据 页 面 上 的 根 元 素 (一 般 指 html 元 素 ) 的 字体 大 小 而 计算 出 实际 的 字体 大 小 ， 不 管 元 素 的 父 元 素 的 字体 大 小 是 多 少 。 


到 目前 为 止 ， 包 括 IE 9 在 内 ， 所 有 浏览 器 都 对 rem 字 体 单位 提供 了 支持 。 


在 下 例 所 示 的 HTML 代 码 中 ， 我 们 指定 html 元 素 的 字体 大 小 为 10 个 像素 ，small 元 素 的 字体 大 小 为 11 个 像素 (10*1.1) 


，strong 元 素 的 字体 大 小 为 18 个 像素 。 


html { font-size: 10рх; ) 
small { font-size: 1.1геп; ) 
strong { font-size: 1.8rem; ) 


在 大 多 数 浏览 器 中 ， 默 认 字 体 大 小 为 16 个 像素 ， 针 对 默认 字体 大 小 来 说 ， 可 以 将 根 元 素 的 字体 大 小 指定 为 62.5%， 从 而 使 浏览 器 


也 可 以 使 所 有 元 素 的 字体 大 小 自动 放大 到 一 个 令 人 满意 的 效果 。 


户 将 浏览 器 的 默认 字体 自动 放大 时 ， 


动 计算 出 10 个 像素 。 这样 ， 当 上 


html { font-size: 62.5% ) 
small { font-size: 1.lrem; } 
strong { font-size: 1.8rem; ) 


注意 ， 在 诸如 IE 8 之 前 版 本 等 老式 浏览 器 中 ， 不 能 使 用 rem 字 体 单位 。 所 以 需要 通过 书写 如 下 所 示 的 样式 代码 来 让 我 们 的 页 


可 以 正常 显示 在 各 种 版 本 的 浏览 器 中 。 


html { font-size: 62.5% ) 
small { font-size: llpx;font-size: 1.1геп; ) 
strong (font-size: 18рх; Ёопі-ѕіле: 1.8rem; } 


第 22 章 盒 相 关 样 式 


方法 以 及 浏览 器 的 支持 情况 ， 同 时 ， 还 将 介绍 几 个 
CSS 3 中 的 属性 来 定义 元 素 的 宽度 值 和 高 度 值 中 是 否 包 含 内 部 补 白 


本 章 详细 介绍 CSS 3 中 各 种 盒 的 类 型 、 概 念 、 使 


属性 一 一 当 盒 中 内 容 超 出 盒 的 容纳 范围 


绍 如 何 使 用 CSS 3 中 的 属性 来 给 盒 添加 阴影 效果 ， 以 及 如 何 使 


内 


Di 


学 习 
“ 掌握 CSS 3 中 各 种 各 样 使 的 类 型 、 概 念 、 使 用 方法 以 及 浏览 器 的 支持 情况 。 
“ 当 金 中 内 容 超 出 容纳 范围 时 ， 知 道 如 何 利用 属性 来 让 浏览 器 按照 自己 想 要 的 方式 对 盒 中 的 内 容 进 行 正确 显示 。 


“ 掌握 给 使 添 加 阴影 的 属性 及 使 用 方法 ， 能 够 使 用 CSS 3 的 属性 给 盒 添加 阴影 效果 。 


时 ， 可 以 用 来 指定 浏览 器 如 何 显示 这 些 超出 部 分 ;最 后 将 介 
区 域 ， 以 及 边框 的 宽度 和 高 度 。 


+ 掌握 几 种 box-sizing 属 性 值 的 不 同 含义 ， 能 够 正确 使 用 box-sizing 属 性 来 定义 样式 中 给 定 的 元 素 的 宽度 值 和 高 度 值 中 是 否 包含 内 部 补 白 区 域 ， 以 及 边框 的 宽度 和 高 度 。 


221 ”使 的 类 型 


2211 盒 的 基本 类 型 


在 CSS 中 ， 使 用 display 属 性 来 定义 盒 的 类 型 。 总 体 来 说 ，CSS 中 的 盒 分 为 block 类 型 与 inline 类 型 。 例 如 ，div 元 素 与 p 元 素 属于 block 类 型 ，span 元 素 与 3 元 素 属于 inline 类 型 。 


接 下 来 ， 我 们 将 block 类 型 与 inline 类 型 做 一 个 对 比 。 代 和 码 清单 22-1 中 是 一 个 将 block 类 型 与 inline 类 型 进行 对 比 的 示例 。 该 示例 中 包含 两 个 div 元 素 与 两 个 span 元 素 。 为 了 更 容易 辨别 ， 我 们 将 div 元 素 的 
背景 设 定 为 绿色 ， 将 span 元 素 的 背景 设 定 为 橘 色 。 从 这 个 示例 的 运行 结果 我 们 可 以 看 出 ，div 元 素 所 代表 的 block 类 型 的 元 素 的 宽度 占 满 了 整个 浏览 器 的 宽度 ， 而 span 元 素 所 代表 的 inline 类 型 的 元 素 的 宽度 
只 等 于 其 内 容 所 在 的 宽度 。 另 外 ， 每 一 行 中 只 允许 容纳 一 个 block 类 型 的 元 素 ， 但 是 可 以 并 列 容纳 多 个 inline 类 型 的 元 素 。 


代码 清单 22-1 将 block 类 型 与 inline 类 型 进行 对 比 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 将 block 类 型 与 nline 类 型 进行 对 比 的 示例 </title> 
</head> 
<style type="text/css"> 
аіу{ 
background-color: #аа##00; 
] 
span{ 
background-color: #ffaa00 


} 

</style> 

<body> 

<div>div 元 素 </div> 
<div>div 元 素 </div> 
<span>span 元 素 </span> 
<span>span 元 素 </span> 
</body> 

</html> 


这 段 代码 的 运行 结果 如 图 22-1 所 示 。 


在 样式 代码 中 如 果 使 用 display 属 性 ， 可 以 将 div 元 素 与 span 元 素 的 类 型 进行 互 换 ， 将 div 元 素 变 成 inline 类 型 的 元 素 ， 将 span 元 素 变 成 block 类 型 的 元 素 ， 代 码 如 下 所 示 。 


<style type="text/css"> 

div( 
background-color: #aaff00; 
display:inline; 

} 

span{ 
background-color: #ffaa00; 
display:block; 

} 

</style> 


将 这 段 代码 蔡 代 到 代码 清单 22-1 所 示 示例 中 ， 然 后 重新 运行 该 示例 ， 运 行 结果 如 图 22-2 所 示 。 


图 22-1 ”将 block 类 型 与 inline 类 型 进行 对 比 的 示例 


| Firefox = en 


Г] 将 block 蜡 与 inline 尖 型 进行 对 比 的 示例 | + | 


22-2 ”将 div 元 素 的 类 型 与 span 元 素 的 类 型 进行 互 换 


22.2 ”对 于 盒 中 容纳 不 下 的 内 容 的 显示 


如 果 在 样式 中 指定 了 盒 的 宽度 与 高 度 ， 就 有 可 能 出 现 某 些 内 容 在 盒 中 容纳 不 下 的 情况 ， 可 以 使 用 overflow 属 性 来 指定 如 何 显示 盒 中 容纳 不 下 的 内 容 。 同 时 ， 与 overflow 属 性 相关 的 还 有 overflow-x 属 
性 、overflow-y 属 性 以 及 text-overflow 属 性 ， 这 几 个 属性 原本 是 IE 浏览 器 独自 发 展 出 来 的 属性 ， 由 于 在 CSS 3 中 被 采用 ， 因 而 受到 了 其 他 浏览 器 的 支持 。 


223 ”对 盒 使 用 阴影 


22.3.1 ”box-shadow 属 性 的 使 用 方法 


在 CSS 3 中 ， 可 以 使 用 box-shadow 属 性 让 盒 在 显示 时 产生 阴影 效果 。 到 目前 为 止 ， 该 属性 受到 了 Firefox 浏 览 器 、Chrome 浏 览 器 、Safari 浏 览 器 及 Opera 浏 览 器 的 支持 。box-shadow 属 性 的 指定 方式 
如 下 所 示 。 


box-shadow: length length length color 


其 中 ， 前 面 3 个 length 分 别 指 阴影 离开 文字 的 横 方向 距离 、 阴 影 离开 文字 的 纵 方向 距离 和 阴影 的 模糊 半径 ，color 指 阴影 的 颜色 。 


代码 清单 22-14 为 box-shadow 属 性 的 一 个 使 用 示例 。 在 该 示例 中 ， 对 一 个 橘 色 盒 使 用 灰色 阴影 。box-shadow 属 性 中 的 前 三 个 参数 均 设 为 10 个 像素 。 


代码 清单 22-14 ”box-shadow 属 性 使 用 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>box-shadow 属 性 使 用 示例 </title> 
<style type="text/css"> 
аіу{ 

background-color: #ffaa00; 

box-shadow: 10рх 10рх 10рх gray; 

width:200px; 

height:100px; 


} 

</style> 
</head> 
<body> 

<div> </div> 
</body> 
</html> 


这 段 代码 的 运行 结果 如 图 22-28 所 示 。 


Firefox “~ 


ЕЕ a 


图 22-28 ”box-shadow 属 性 使 用 示例 


224 ”指定 针对 元 素 的 宽度 与 高 度 的 计算 方法 


在 CSS 3 中 ， 使 用 box-sizing 属 性 来 指定 针对 元 素 的 宽度 与 高 度 的 计算 方法 。 到 目前 为 止 ，Firefox 4、Opera 10, Safari 3、Chrome 851E 8 版 本 的 浏览 器 都 对 这 个 属性 提供 了 支持 ， 本 节 针 对 这 个 属 
性 做 一 详细 介绍 。 


第 23 章 ”背景 与 边框 相关 样式 


本 章 主要 介绍 CSS 3 中 与 背景 和 边框 相关 的 一 些 样 式 ， 其 中 包括 与 背景 相关 的 几 个 属性 、 如 何在 一 个 元 素 的 背景 中 使 用 多 个 图 像 文件 、 如 何 绘制 圆 角 边 框 、 如 何 为 元 素 添加 图 像 边 框 。 


学 习 内 容 : 
+ 掌握 CSS 3 中 新 增 的 与 背景 相关 的 background-clip 属 性 、background-otigin 属 性 、background-size 属 性 以 及 background-break 属 性 的 概念 、 使 用 方法 以 及 各 种 浏览 器 的 支持 情况 。 
“ 知道 如 何在 一 个 元 素 的 背景 中 使 用 多 个 图 像 文件 来 完成 复杂 背景 图 像 的 绘制 。 
+ 知道 如 何 使 用 CSS 3 中 的 border-radius 属 性 来 为 元 素 添加 一 个 圆 角 边框 。 


+ 知道 如 何 使 用 CSS 3 中 的 border-image 属 性 来 为 元 素 添加 一 个 可 随 着 元 素 尺寸 的 变化 而 自动 伸缩 的 图 像 边 框 。 


23.1 与 背景 相关 的 新 增 属性 


CSS 3 中 追加 了 一 些 与 背景 相关 的 属性 ， 如 表 23-1 所 示 。 
表 23-1 CSS 3 中 追加 的 背景 相关 属性 


属 性 功 能 
background-clip 指定 背景 的 显示 范围 
background-origin 指定 绘制 背景 图 像 时 的 起 点 
background-size 指定 背景 中 图 像 的 尺寸 
backeround-break 省 定 内 联 元 素 的 背景 图 像 进行 平 铺 时 的 循环 方式 


在 Firefox 浏 览 器 中 ， 支 持 除 了 background-size 属 性 之 外 的 其 他 三 个 属性 ， 在 样式 代码 书写 的 时 候 需 要 在 属性 前 面 如 上 “-moz-” 文 字 。 但 是 在 使 用 background-break 属 性 的 时 候 ， 在 样式 代码 中 不 
是 书写 “-moz-background-break”， 而 是 书写 “-moz-background-inline-policy”， 这 一 点 需要 注意 。 


在 Safari 浏 览 器 、Google Chrome 浏 览 器 以 及 Opera 浏 览 器 中 ， 支 持 除 了 background-break 之 外 的 其 他 三 个 


23.2 ”在 一 个 元 素 中 显示 多 个 背景 图 像 


属性 ， 在 样式 代码 书写 的 时 候 需要 在 


在 CSS 3 中 可 以 在 一 个 元 素 中 显示 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进 行 重 赤 显示 ， 


从 而 使 得 调整 背景 图 像 中 所 


首先 ， 我 们 在 代码 清单 23-6 中 看 一 个 示例 一 一 在 一 个 元 素 中 显示 多 个 背景 图 像 。 在 该 示例 中 


代码 清单 23-6 ”在 一 个 元 素 中 显示 多 个 背景 图 像 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 在 一 个 元 素 中 显示 多 个 背景 图 像 的 示例 </title> 
</head> 
<style> 
div{ 
background-image :иг1 (flower-red. png), 
url (flower-green.png) ,url (sky. jp9) ; 
background-repeat: no-repeat, repeat-x, no-repeat; 
background-position: 3% 98%,85%, center center, top; 
width: 300px; 
padding: 90px 0px; 
} 
</style> 
<body> 
<div></div> 
</body> 
</html> 


的 素材 变 得 更 加 容易 。 


属性 前 面 加 上 “-webkit-” 文 字 。 


有 一 个 div 元 素 ， 我 们 来 看 一 下 怎样 在 这 个 div 元 素 显示 多 个 背景 图 像 。 


这 段 代 码 运行 结果 如 图 23-14 所 示 。 


Firefox ™ 


图 23-14 在 一 个 元 素 中 显示 多 个 背景 图 像 的 示例 


在 div 元 素 的 样式 代码 中 ,我们 使 用 到 了 几 个 关于 背景 的 属性 一 一 background-image 


属性 、background-repeat 


属性 与 background-position 


属性 。 这 些 


属性 都 是 CSS 1 中 就 有 的 


属性 ， 但 是 在 CSS 3 


中 ， 通 过 利 


逗号 作为 分 隔 符 来 同时 指定 多 个 属性 的 方法 ， 可 以 指定 多 个 背景 图 像 ， 并 且 实 现在 一 个 元 素 中 显示 多 个 背景 


注意 ， 在 使 用 background-image 属 性 来 指定 图 像 文 件 的 时 候 ， 指 定 的 时 候 是 按 在 浏览 器 中 显示 时 图 像 晋 放 的 


的 。 另 外 ， 通 过 多 个 background-repeat 属 性 与 background-position 属 性 的 指定 ， 可 以 单独 指定 背景 图 像 


在 代码 清单 23-6 中 ， 通 过 指定 多 个 background-image 属 性 、background-repeat 属 性 与 background-position 
重 指定 并 配合 多 个 图 像 文件 一 起 利用 的 属性 如 下 : 


+ background-image 


+ background-repeat 


+ background-position 


` background-clip 


“ background-origin 


+ background-size 


233 ”使 用 渐变 色 背 景 


在 CSS 3 


图 像 的 功能 。 


页 序 从 上 往 下 指定 的 ， 第 一 个 图 像 文件 是 放 在 最 上 面 的 ， 最 后 指定 的 文件 是 放 在 最 下 面 


中 某 个 图 像 文 件 的 平 铺 方 式 与 放置 位 置 。 


属性 ， 我 们 实现 了 在 一 个 元 素 的 背景 中 显示 多 个 图 像 文 件 的 功能 。 具 体 来 说 ， 人 允许 被 多 


中 ， 支 持 对 于 元 素 指定 渐变 色 背 景 。 所 谓 渐变 是 指 从 一 种 颜色 慢 慢 过 渡 到 另外 一 种 颜色 。 渐 变 分 为 线性 渐变 与 放射 性 渐变 。 


234 ” 圆 角 边框 的 绘制 


本 节 介绍 如 何 使 用 CSS 3 的 样式 进行 圆 角 边框 的 绘制 。 圆 角 边 框 的 绘制 也 是 Web 网 站 或 Web 应 有 


只 靠 样 式 就 全 


程序 中 经 常 


用 来 美化 页 面 效 果 的 手法 之 一 。 在 CSS 3 之 前 ， 需 要 使 用 图 像 文件 才能 达到 同样 效果 ， 如 果 


完成 圆 角 边 框 的 绘制 ， 对 界面 设计 者 来 说 无 疑 是 一 件 可 喜 的 事情 。 到 目前 为 止 ，IE、Safari、Firefox、Opera 以 及 Chrome 浏 览 器 都 支持 这 种 绘制 圆 角 边框 的 样式 。 


23.5 ”使 用 图 像 边框 


23.5.1 border-image 属 性 


在 CSS 3 之 前 ， 如 果 要 使 用 图 像 边框 ， 但 是 当 元 素 的 长 或 宽 是 随时 可 变 的 情况 时 ， 页 面 制作 者 通常 采 


烦 ， 另 一 方面 是 页 面 上 使 用 的 元 素 比较 多 。 


针对 这 种 情况 ，CSS 3 中 增加 了 一 个 border-image 属 性 ， 可 以 让 元 素 的 长 度 或 宽度 处 于 随时 变化 状态 的 边框 统一 使 
自动 将 所 使 用 到 的 图 像 分 割 为 9 部 分 进行 处 理 ， 这 样 就 不 需要 页 面 制作 者 另外 进行 人 工 处 理 了 。 另 外 ， 页 面 中 也 不 需 


时 


23.5.2 节 中 详细 介绍 。 


到 目前 为 止 ， IE、Safari、Firefox、Opera 以 及 Chrome 浏 览 器 都 支持 border-image 属 性 的 使 用 。 


代码 清单 23-10 展 示 了 一 个 border-image 属 性 的 使 用 示例 。 该 示例 中 有 一 个 div 元 素 ， 使 


的 做 法 是 让 元 


素 的 每 条 边 单独 使 用 一 幅 图 像 文 件 。 但 是 ， 这 种 做 法 也 有 缺点 : 一 方面 是 比较 麻 


一 个 图 像 文件 进行 绘制 。 使 用 border-image 属 性 ， 会 让 浏览 器 在 显示 图 像 边框 


网 


代码 清单 23-10 border-image 属 性 的 使 用 示例 


<!DOCTY 
"thes 


PE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
/www.w3.org/TR/xhtm11/DTD/xhtm1l1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<meta h 
<title>l 
</head> 
<style 
div( 


} 
</style: 
<body> 
<аіу>т 
</div> 


ttp-equiv="Content-Type" content="text/html; charset=gb2312" /> 
border-image 属 性 的 使 用 示例 </title> 


type="text/css"> 
border-image: url (borderimage.png) 20 20 20 20 / 20px; 
> 


例文 字 


</body> 
</html> 


这 段 代 码 的 运行 结果 如 图 23-34 所 示 。 


代码 清单 23-10 中 没有 对 div 元 素 指定 宽度 ， 所 以 图 像 边 框 的 宽度 等 于 浏览 器 的 宽度 ， 如 果 对 div 元 素 指定 宽度 ， 则 医 


border-image 


因此 而 使 用 较 多 的 元 素 。 关 于 浏览 器 对 于 边框 所 使 用 到 的 图 像 的 自动 分 割 ， 会 在 


属性 为 该 div 元 素 添加 了 一 个 图 像 边框 。 


代码 修改 成 如 下 所 示 的 样式 代码 (指定 div 元 素 的 宽度 ) ， 然 后 重新 运行 该 示例 ， 运 行 结果 如 


图 23-35 所 示 。 


像 边 框 也 会 自动 伸缩 成 指定 的 宽度 ， 而 且 能 够 正常 显示 。 将 代码 清单 23-10 中 的 样式 


<style 
div( 


type="text/css"> 


border-image: url(borderimage.png) 20 20 20 20 / 20px; 
width:200px; 


} 
</style> 


| Firefox = J 


123-34 ”border-image 属 性 的 使 用 示例 


图 23-35 ”添加 图 像 边 框 后 修改 div 元 素 的 宽度 


第 24 章 CSS 3 中 的 变形 处 理 


在 CSS 3 中 ,可 以 利用 transform 功 能 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 斜 、 移 动 这 4 种 类 型 的 变形 处 理 ， 本 章 将 对 此 进行 详细 介绍 。 


学 习 内 容 : 

“ 掌握 CSS 3 中 transform 功 能 的 使 用 方法 ， 能 够 使 用 transform 功 能 来 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 斜 与 移动 的 变形 效果 。 
“能够 将 旋转 、 缩 放 、 倾 斜 与 移动 这 4 种 变形 效果 结合 使 用 ， 并 知道 使 用 的 先后 顺序 不 同 ， 页 面 显 示 结 果 会 有 什么 样 的 区 别 。 
“ 掌握 3D 变 形 功 能 的 基本 概念 及 其 实现 方法 。 


“ 掌握 变形 憩 阵 的 基本 概念 及 其 使 用 方法 。 


24.1 transform 功 能 的 基础 知识 


24.1.1 如 何 使 用 transform 功 能 


在 CSS 3 中 ， 通 过 transform 属 性 来 使 用 transform 功 能 。 到 目前 为 止 ，Safari 3.1 以 上 、Chrome 8 以 上 、Firefox 4 以 上 以 及 Opera 10 以 上 版 本 浏览 器 都 对 该 属性 提供 支持 。 


首先 ， 我 们 在 代码 清单 24-1 中 看 一 个 简单 使 用 transform 属 性 实现 变形 处 理 的 示例 。 在 示例 中 有 一 个 黄色 的 div 元 素 ， 通 过 在 样式 代码 中 使 用 “transform: rotate (45deg) ”语句 使 该 div 元 素 顺 时 针 
旋转 45"。deg 是 CSS 3 的 “Values and Units” 模 块 中 定义 的 一 个 角度 单位 。 


代码 清单 24-1 transform 属 性 使 用 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm1l1/DTD/xhtm11-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>transform 属 性 使 用 示例 </title> 
</head> 
<style type="text/css"> 
div{ 
width: 300px; 
margin: 150px auto; 
background-color: yellow; 
text-align: center; 
transform: rotate (45deg) ; 
} 
</style> 
<body> 
<div> 示 例文 字 </div> 
</body> 
</html> 


这 段 代 码 的 运行 结果 如 


24-1 所 示 。 


[ 
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242 ”对 一 个 元 素 使 用 多 种 变形 


24.2.1 ”对 一 个 元 素 使 用 多 种 变形 的 方法 


上 一 节 介绍 了 使 用 transform 对 元 素 进 行 旋转 、 缩 放 、 倾 斜 以 及 移动 的 方法 ， 本 节 介绍 如 何 综合 使 用 这 几 种 方法 来 对 一 个 元 素 使 用 多 重 变形 。 


首先 ， 我 们 来 看 两 个 示例 。 代 码 清单 24-5 是 一 个 对 元 素 先 移动 ， 然 后 旋转 ， 最 后 缩放 的 示例 ; 代码 清单 24-6 是 一 个 对 元 素 先 旋转 ， 然 后 缩放 ， 最 后 移动 的 示例 。 这 两 个 示例 都 是 对 同一 个 页 面 中 同一 个 
元 素 进 行 多 重 变形 的 示例 ， 而 且 各 种 变形 方法 中 所 使 用 的 参数 也 都 相同 ， 旋 转 时 都 是 顺 时 针 旋 转 45" ， 缩 放 时 都 是 将 元 素 放大 1.5 倍 ， 移 动 时 都 是 向 右 移动 150px， 向 下 移动 200px 一 一 两 个 示例 的 差别 只 是 
在 使 用 3 种 变形 方法 的 先后 顺序 不 一 样 而 已 ， 我 们 来 看 一 下 两 种 示例 在 浏览 器 中 的 运行 结果 是 否 相同 。 


代码 清单 24-5 ”对 元 素 使 用 多 重 变形 示例 ( 先 移动 ， 然 后 旋转 ， 最 后 缩放 ) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 对 元 素 使 用 多 重 变形 示例 </title> 

</head> 

<style type="text/css"> 

div( 


width: 300px; 

background-color: yellow; 

text-align: center; 

transform: CLranslate(150px, 200px) rotate(45deg) scale(1.5); 


} 

</style> 

<body> 

<div> 示 例文 字 </div> 
</body> 

</html> 


代码 清单 24-5 的 运行 结果 如 图 24-8 所 示 。 


代码 清单 24-6 ”对 元 素 使 用 多 重 变形 示例 ( 先 旋转 ， 然 后 缩放 ， 最 后 移动 ) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm1l1/DTD/xhtm11-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 对 元 素 使 用 多 重 变形 示例 </title> 
</head> 
<style type="text/css"> 
div( 
width: 300px; 
background-color: yellow; 
text-align: center; 
transform:rotate (45deg) scale (1.5) translate (150px, 200рх); 


} 

</style> 

<body> 

<div> 示 例文 字 </div> 
</body> 

</html> 


Py 
Firefox = 


O 对 元 过 使 用 多 重 变形 示例 [+] 
< j> Е | | | 7 file:///0:/Documents and Settings/In/ FAH hyF/1 ht {ү + 


图 24-8 ”对 元 素 使 用 多 重 变形 示例 〈( 先 移动 ， 然 后 旋转 ， 最 后 缩放 ) 


代码 清单 24-6 的 运行 结果 如 图 24-9 所 示 。 


Firefox = 


图 24-9 ”对 元 素 使 用 多 重 变形 示例 〈 先 旋转 ， 然 后 缩放 ， 最 后 移动 ) 


从 两 个 示例 的 运行 结果 中 我 们 可 以 看 出 ， 元 素 在 页 面 上 所 处 位 置 并 不 相同 ， 为 什么 会 这 样 ? 


1. 代 码 清单 24-5 的 变形 步骤 


首先 ， 我 们 来 详细 地 看 一 下 代码 清单 24-5 的 示例 中 所 做 变形 处 理 的 详细 步 又。 


Т) 首先 向 右 移动 150px， 向 下 移动 200px， 如 图 24-10 所 示 (图 中 黑 点 为 元 素 的 中 心 点 ) 。 


2) 然后 旋转 45" ， 并 且 放 大 1.5 倍 ， 如 图 24-11 所 示 (图 中 黑 点 为 元 素 的 中 心 点 ) 。 


150px 


E 
E 
W muumumumumnu" 


Wumunumununmuu" 


200px 


图 24-11 元 素 经 过 移动 后 旋转 并 放大 


2. 代 码 清单 24-6 的 变形 步骤 


接 下 来 ， 我 们 来 详细 地 看 一 下 代码 清单 24-6 的 示例 中 所 做 变形 处 理 的 详细 步骤 。 


1) 首先 旋转 45"， 并 且 放 大 1.5 倍 ， 如 图 24-12 所 示 (图 中 黑 点 为 元 素 的 中 心 点 ) 。 


2) 然后 向 右 移动 150px， 向 下 移动 200px， 如 图 24-13 所 示 。 


2412 元素 旋转 45” ， 并 且 放大 1.5 倍 


图 24-13 元素 经 过 旋转 并 放大 后 移动 


243 ”使 用 3D 变 形 功 能 
243.1 3D 变形 功能 概述 


在 过 去 相当 长 的 一 段 时 间 内 


，3D 技 术 一 直 被 应 用 在 桌面 


型 应 用 程 


自从 WPF 与 Silverlight 中 使 


透视 投影 变 


换 (Perspective transforms) 技术 开始 ， 对 F 
2009 年 3 月 ，CSS 3D Transform 模 型 正式 推 H 


序 内 。 最 近 ， 随 着 智能 电话 中 一 些 显 卡 硬件 加 速 ( 即 GPU 加 速 ) 技术 的 应 用 ，3D 技 术 也 


户 界 H 


始 逐 渐 被 应 用 在 Web 应 


上 的 元 素 使 


H 


日 ， 它 允许 Web 应 有 


程序 中 。 


一 个 合适 的 CSS 模 型 正式 成 为 
面 上 任何 可 视 元 素 应 


上 


程序 的 开发 者 通过 对 页 


发 者 实现 3D 效 果 的 一 种 方法 。 
3D 透 视 投影 变形 特效 来 实现 一 个 高 级 的 、 令 人 惊叹 的 


CSS 3D Transform 模 型 是 对 CSS 2D Transform 模 型 的 一 个 扩 
3D 界 面 的 难度 ， 所 以 现在 可 以 很 方便 地 实现 一 个 3D 


展 ， 其 中 添加 了 一 些 特性 ， 其 中 包括 在 3D 空 间 
户 界 H], 


FPH. 


旋转 及 变形 特效 。 由 于 CSS 3D Transform 模 型 的 使 有 


中 实现 透视 投影 、 


可 以 大 大 降低 实现 


244 变形 矩阵 


和 矩阵 函数 matrix () 函数 与 matrix3d () 函数 是 理解 CSS 3 中 变形 技术 的 关键 。 在 大 多 数 时 候 ， 为 了 简单 起 见 ， 你 可 以 直接 使 用 类 似 rotate () 与 skewY () 之 类 的 方法 。 但 是 在 每 一 种 变形 方法 的 背 
后 都 存在 着 一 个 对 应 的 和 矩阵。 理解 这 些 矩 阵 的 工作 原理 对 我 们 是 很 有 帮助 的 。 


CSS 变 形 是 建立 在 线性 代数 与 几何 的 基础 上 的 ， 尽 管 这 牵涉 一 些 高 等 数学 ， 但 即使 你 没有 学 过 这 两 门 学 科 ， 也 可 以 很 熟练 地 使 用 CSs 3 中 的 变形 技术 。 


在 本 节 中 ， 我 们 介绍 CSS 3 中 在 实现 2D 变 形 时 使 用 的 3x 3 矩阵 与 实现 3D 变 形 时 使 用 的 4x4 和 矩阵 。 


第 25 章 CSS 3 中 的 动画 功能 


在 CSS 3 中 ， 如 果 使 用 动画 功能 ， 可 以 使 页 面 上 的 文字 或 画像 具有 动画 效果 ， 可 以 使 背景 色 从 一 种 颜色 平滑 过 渡 到 另 一 种 颜色 。 


CSS 3 中 的 动画 功能 分 为 Transitions 功 能 与 Animations 功 能 ， 这 两 种 功能 都 可 以 通过 改变 CSs 中 的 属性 值 来 产生 动画 效果 。 例 如 ， 通 过 改变 background-color 属 性 的 属性 值 来 让 背景 色 从 一 种 颜色 平滑 
过 渡 到 另 一 种 颜色 。 


í 


到 目前 为 止 ，Transitions 功 能 支持 从 一 个 属性 值 平 滑 过 渡 到 另 一 个 属性 值 ，Animations 功 能 支持 通过 关键 帧 的 指定 来 在 页 面 上 产生 更 复杂 的 动画 效果 。 


本 章 针对 Transitions 功 能 与 Animations 功 能 做 一 详细 介绍 。 


© 掌握 CSS 3 中 Transitions 功 能 的 使 用 方法 ， 能 够 使 用 Transitions 功 能 来 实现 在 属性 值 的 开始 值 与 属性 的 结束 值 之 间 进 行 平滑 过 渡 的 动画 。 


+ S CSS 3 中 Animations 功 能 的 使 用 方法 ， 能 够 在 样式 中 创建 多 个 关键 帧 ， 在 这 些 关 键 帧 之 中 编写 样式 ， 并 且 能 够 在 页 面 中 创建 结合 这 些 关键 帧 所 运行 的 较为 复杂 的 动画 。 


25.1 _ Transitions 功 能 


本 节 针 对 CSS 3 中 的 Transitions 功 能 做 一 详细 介绍 。 到 目前 为 止 ，Firefox 4 以 上 、Opera 10 以 上 、Safari 3.1 以 上 、Chrome 8 以 上 以 及 IE 11 以 上 版 本 浏览 器 都 对 Transitions 功 能 提供 了 支持 。 


25.2 _ Animations 功 能 


在 CSS 3 中 ， 除 了 可 以 使 用 Transitions 功 能 实现 动画 效果 之 外 ， 还 可 以 使 用 Animations 功 能 实现 更 为 复杂 的 动画 效果 ， 到 目前 为 止 ，Safari 4 以 上 、Chrome 2 以 上 、IE 11 以 上 、Opera 18 以 上 以 及 
Firefox 20 以 上 版 本 浏览 器 均 对 该 功能 提供 支持 。 本 节 针 对 Animations 功 能 做 一 详细 介绍 。 


第 26 章 “布局 相关 样式 


Web 页 面 中 的 布局 是 指 在 页 面 中 如 何 对 标题 、 导 航 栏 、 主 要 内 容 、 脚 注 、 表 单 等 各 种 构成 要 素 进行 合理 编排 。 在 CSS 3 之 前 ， 主 要 使 用 float 属 性 或 position 属 性 进行 页 面 中 的 简单 布局 ， 但 是 也 存在 一 
些 缺 点 ， 名 如 如 果 两 栏 或 多 栏 中 元 素 的 内 容 高 度 不 一 致 则 底部 很 难 对 齐 。 因 此 ， 在 CSS 3 中 追加 了 一 些 新 的 布局 方式 ， 使 用 这 些 新 的 布局 方式 ， 除 了 可 以 修改 之 前 存在 的 问题 之 外 ， 还 可 以 进行 更 为 便捷 、 
更 为 复杂 的 页 面 布局 。 


本 章 针对 CSS 3 中 的 布局 做 一 详细 介绍 ， 主 要 介绍 多 栏 布局 与 盒 布 局 。 到 目前 为 止 ， 这 两 种 布局 方式 受到 了 Firefox、Safari 以 及 Chrome 浏 览 器 的 支持 。 


+ 掌握 CSS 3 中 多 栏 布局 的 使 用 方法 ， 知 道 为 什么 要 使 用 多 栏 布局 ， 它 可 以 解决 使 用 float 属 性 或 position 属 性 时 出 现 的 什么 问题 。 


“ 掌握 CSS 3 中 人 铭 布 局 的 使 用 方法 ， 知 道 为 什么 要 使 用 使 布局 ， 它 可 以 解决 使 用 float 或 position 属 性 时 出 现 的 什么 问题 ， 盒 布局 与 多 栏 布 局 有 什么 区 别 ， 什 么 场合 下 应 该 使 用 金 布 局 ， 什 么 场合 应 该 使 用 多 


“ 掌握 CSS 中 弹性 盒 布 局 的 基本 概念 以 及 使 用 方法 ， 能 够 指定 容器 中 元 素 的 水 平方 向 或 垂直 方向 上 的 排列 方式 ， 能 够 修改 元 素 的 显示 顺序 ， 能 够 指定 子 元 素 是 否 换行 ， 掌 握 如 何 指定 各 子 元 素 在 水 平方 向 
及 垂直 方向 上 的 对 齐 方式 。 


捍 如 何 使 用 calc 方 法 灵活 指定 元 素 的 宽度 与 高 度 。 


% 


261 多 栏 布局 


26.1.1 使 用 float 属 性 或 position 属 性 的 缺点 


St 


本 节 针 对 CSS 3 中 的 多 栏 布 


局 的 一 个 


局 做 一 详细 介绍 ， 
示例。 


代码 清单 26-1 ”使 用 float 属 性 进行 页 面 布 局 的 示例 


在 介绍 多 栏 布局 之 前 ， 先 来 回顾 一 下 CSS 3 之 前 是 如 何 使 


float 属 性 或 position 属 性 进行 页 面 中 简单 布局 的 。 代 码 清单 26-1 展 示 了 使 用 float 


属性 进行 页 面 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title> 使 用 float 属 性 进行 页 面 布 局 的 示例 </title> 

<style type="text/css"> 


div( 


width: 20em; 
float:left; 


Ë 
div#div1{ 


margin-right :2em; 


} 
div#div3{ 


width:100%; 
background-color:yellow; 
height :200px; 


} 

</style> 
</head> 
<body> 

Хау: id="div: 


Зар наный Ен А. 
</di 


示例 文字 。 相 对 来 说 比较 长 的 示例 文字 。 


<div id="di 


<p> 示 例文 字 2> 3 测 对 来 说 比较 长 的 示例 文字 。 


iv> 


</d 


示例 文字 。 相 对 来 说 比较 长 的 示例 文字 。 


<div id="div3"> 页 面 中 其 他 内 容 
</div> 

</body> 

</html> 


示例 文字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 


示例 文字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 


相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 


相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 


这 段 代码 的 运行 结果 如 图 26-1 所 示 。 


使 用 float 属 性 或 position 属 性 进行 页 面 布局 时 有 一 个 比较 显著 的 缺点 ， 就 是 第 一 个 div 元 素 与 第 二 个 div 元 素 是 各 自 独 立 的 ， 因 


Firefox ~ 


[ 使 用 float 尾 性 进行 页 面 布局 的 示例 


€ > L) file:///F:/HTMLSCSS3/html/test:htmi | Y |©)[Ф8- coooe Р) 


示例 文字 1。 相 对 来 说 比较 长 的 示例 文字 。 示 
例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 
字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 
相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 
来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 
比较 长 的 示例 文字 。 示 例文 字 。 


页 面 中 其 他 内 容 


示例 文字 2。 相 对 来 说 比较 长 的 示例 文字 。 示 
例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 
字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 
相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 
来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 
比较 长 的 示例 文字 。 示 例文 字 。 


26-1 使 用 float 属 性 进行 页 面 布局 的 示例 


齐 ， 叶 致 页 面 中 多 出 一 块 空白 区 域 。 璧 如 在 代码 清单 26-1 的 第 一 个 div 元 素 的 开头 加 上 一 幅 图 像 ， 不 改变 p 元 素 中 的 文字 内 容 ， 代 码 如 下 所 示 。 


此 如 果 在 第 一 个 div 元 素 中 加 入 一 些 内 容 ， 将 会 使 得 两 个 元 素 的 底部 不 能 对 


<div іа="аіу1" >. 
<img src="test 

<P> 示 例文 字 1。 к нк, 示例 文字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 
</div> 


将 以 上 这 段 代码 替换 到 代码 清单 26-1 中 定义 第 一 个 div 元 素 的 html 代 码 处 ， 然 后 


新 运行 该 示例 ， 结 果 如 图 26-2 所 示 。 


Firefox 了 


є > L) file:///F:/HTML5CSS3/html/test.htmi ҮҮ =. 加 网 -see P) 反馈 - 


示例 文字 2。 相 对 来 说 比较 长 的 示例 文字 。 示 

例文 字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 

字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 
sr А е _ ”相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 
示例 文字 1。 相 对 来 说 比较 长 的 示例 文字 。 示 。 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 
例文 字 。 相 对 来 说 比较 长 的 示 倒 文字 。 示 倒 文 — 比较 长 的 示例 文字 。 示 例文 字 。 


字 。 相 对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 
相对 来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 
来 说 比较 长 的 示例 文字 。 示 例文 字 。 相 对 来 说 
比较 长 的 示例 文字 。 示 例文 字 。 


页 面 中 其 他 内 容 


262 在 第 一 个 div 元 素 的 第 一 段 中 插入 一 幅 图 像 


26.2” 盒 布局 


26.2.1 ”使 用 float 属 性 或 position 属 性 时 的 缺点 


在 CSS 3 中 ， 除 了 多 栏 布 局 之 外 ， 还 可 以 使 用 盒 布局 解决 前 面 所 述 使 用 float 属 性 或 position 属 性 时 左右 两 栏 或 多 栏 中 底部 不 能 对 齐 的 问题 。 


接 下 来 ， 代 码 清单 26-4 展 示 了 一 个 使 用 float 属 性 进行 布局 的 示例 。 该 示例 中 有 三 个 div 元 素 ， 简 单 展示 了 网 页 中 的 左 侧 边栏 、 中 间 内 容 和 右 侧 边栏 。 


代码 清单 26-4 “使 用 float 属 性 进行 布局 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title> 使 用 float 属 性 进行 布局 的 示例 </title> 
<style type="text/css"> 
#left-sidebar( 

float: left; 

width: 200px; 

padding: 20px; 

background-color: orange; 


} 
#contents{ 
float: left; 
width: 300px; 
padding: 20px; 
background-color: yellow; 


} 
#right-sidebar{ 
float: left; 
width: 200px; 
padding: 20px; 
background-color: limegreen; 


} 
#left-sidebar, #contents, right- sidebar{ 
box-sizing: border-box; 


Ë 
</style> 

</head> 

<body> 

<div id="container"> 

<div id="left-sidebar"> 
<h2> 左 侧 边栏 </h2> 

<ul> 

<li><a href=""> 超 链接 </a></1i> 
<11><а href=""> 超 链接 </a></1i> 
<li><a href=""> 超 链接 </a></1i> 
<li><a href=""> 超 链接 </a></1i> 
<li><a href=""> 超 链接 </a></1i> 
</ul> 

</div> 

<div id="contents"> 

<h2> 内 容 </h2> 

ктын касын Басын Ба ы Басы ДБ аы Бакы Ба ыы Бажы Бачы Басы Бакы Баты Базы Бакы Базы Ба ы Басын Ба еы Бажы Басры Басы Ба ы Ба FT 
</div> 

<div id="right-sidebar"> 
<h2> 右 侧 边栏 </h2> 

<ul> 

<li><a href=""> 超 链接 </a></1i> 
<li><a href=""> 超 链接 </a></1i> 
<li><a href=""> 超 链接 </a></1i> 
</ul> 


</div> 
</div> 
</body> 
</html> 


代码 清单 26-4 的 运行 结果 如 图 26-7 所 示 。 


Firefox ~ 


内 容 


示例 文字 示例 文字 示例 文字 示例 文字 
示例 文字 示例 文字 示例 文字 示例 文字 


示例 文字 示例 文字 。 示例 文字 示例 广 
字 示 例文 字 示 例文 字 示 例文 字 示 例文 
字 示 例文 字 示 例文 字 示 例文 字 示例 广 
字 。 示例 文字 示例 文字 示例 文字 示例 
文字 示例 文字 示例 文字 示例 文字 示例 
文字 示例 文字 示例 文字 。 示例 文字 示 
例文 字 示 例文 字 示例 文字 示例 文字 示 
站 
F. 


26-7 使 用 float 属 性 进行 布局 的 示例 


从 图 26-7 中 我 们 可 以 看 出 ， 使 用 float 属 性 或 position 属 性 时 ， 左 右 两 栏 或 多 栏 中 div 元 素 的 底部 并 没有 对 齐 。 


26.3 ”弹性 会 布局 


26.3.1 ”对 多 个 元 素 使 用 flex 属 性 


在 26.2.1 节 介绍 的 盒 布局 中 ， 我 们 对 代表 左 侧 边栏 、 中 间 内 容 、 右 侧 边 栏 的 三 个 div 元 素 的 宽度 都 进行 了 设 定 ， 如 果 我 们 想 让 这 三 个 div 元 素 的 总 宽度 等 于 浏览 器 窗口 的 宽度 ， 而 且 能 够 随 着 窗口 宽度 的 改 


变 而 改变 时 ， 应 该 怎么 设 定 呢 ? 


在 使 用 float 属 性 或 position 属 性 的 时 候 ， 我 们 需要 使 用 包括 负 外 边 距 (margin) 在 内 的 比较 复杂 的 指定 方法 才能 够 达到 这 个 要 求 ， 但 是 如 果 使 


性 盒 布局 就 可 以 了 。 


盒 布 局 ， 我 们 只 要 使 用 一 个 flex 属 性 ， 使 盒 布局 变 为 弹 


针对 代码 清单 26-4 中 所 示 示 例 ， 将 样式 代码 修改 为 如 下 所 示 的 样式 代码 ， 在 样式 代码 中 使 用 盒 布局 ， 将 表示 左 侧 边 栏 与 右 侧 边栏 的 两 个 div 元 素 的 宽度 保留 为 200px， 在 表示 中 间 内 容 的 div 元 素 的 样式 


代码 中 去 除 原来 的 指定 宽度 为 300px 的 样式 代码 ， 加 入 flex 属 性 。 


<style type="text/css"> 
#container( 
display: flex; 


} 

#left-sidebar( 
width: 200px; 
padding: 20px; 
background-color: orange; 


} 
#contents{ 
ex:1; 
padding: 20px; 
background-color: yellow; 
} 
#right-sidebar{ 
idth: 200px; 
padding: 20px; 
background-color: limegreen; 


} 
#left-sidebar, #сопіепіѕ, #right-sidebar{ 
box-sizing: border-box; 


} 
</style> 


将 上 面 这 段 样式 代码 替代 到 代码 清单 26-4 中 ， 然 后 重新 运行 该 示例 ， 运 行 结果 如 图 26-10 所 示 。 


mre Y 


|} 使 用 float 属 性 进行 布局 的 示例 i 
€)> -C| |0 file///G/Documents and Settines/Iin/F 29 h77 /1 html 


内 容 


示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 
文字 示例 又 字 。 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 广 
字 示 例文 字 示例 文字 示例 文字 。 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 
示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 。 示例 文字 示例 文字 示例 文字 示 
例文 字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 示例 文字 。 


图 26-10 HERH ENEA TA 


26.4 “calc 方 法 


26.4.1 “calc 方 法 概述 


度 等 数值 类 型 的 样式 属性 值 。 到 目前 为 止 ，Chrome 19 以 上 、Opera 12 以 上 、Safari 6 以 上 、Firefox 8 以 上 以 及 


M 
2 


在 CSS 3 中 新 增 一 个 calc 方 法 ， 开 发 者 可 以 通过 使 用 该 方法 来 自动 计算 元 素 的 宽度 、 
IE 9 以 上 版 本 浏览 器 均 支 持 该 方法 的 使 用 。 


第 27 章 Media Queries 相 关 样 式 


在 CSS 3 的 众多 模块 中 ， 有 一 个 与 各 种 媒体 相关 的 重要 模块 一 一 Media Queries， 本 章 将 对 这 一 模块 进行 详细 介绍 。 


学 习 内 容 : 
“ 掌握 CSS 3 中 Media Queries 模 块 的 基本 概念 ， 以 及 使 用 Media Queries 模 块 可 以 实现 的 功能 。 


“ 掌握 如 何 编写 媒体 查询 表达 式 来 让 浏览 器 根据 当前 窗口 尺寸 自动 在 样式 表 中 挑选 一 种 样式 并 使 用 。 了 解 iPhone 或 iPod touch 设 备 在 支持 Media Queries 时 有 何 特殊 之 处 ， 以 及 应 该 用 何 种 方法 来 指定 iPhone 
或 iPod touch 设 备 中 的 safari 浏 览 器 在 处 理 页 面 时 根据 多 少 像素 的 窗口 宽度 来 处 理 。 


+ 掌 担 媒体 查询 表达 式 的 编写 方法 ， 熟 悉 CSS 3 中 定义 的 所 有 设备 类 型 及 设备 特性 、 媒 体 查询 表达 式 中 各 种 关键 字 的 含义 ， 以 及 结合 使 用 设备 类 型 、 设 备 特性 和 各 种 关键 字 来 正确 编写 媒体 查询 表达 式 。 


27.1 ”根据 浏览 器 的 窗口 大 小 来 选择 使 用 不 同 的 样式 


在 CSS 中 ， 与 媒体 相关 的 样式 定义 是 从 CSS 2.1 开 始 的 。CSS 2.1 中 定义 了 各 种 媒体 类 型 ， 包 括 显示 器 、 便 携 设 备 、 电 视 机 ， 等 等 。 


CSS 3 中 加 入 了 Media Queries 模 块 ， 该 模块 中 允许 添加 媒体 查询 (media query) 表达 式 ， 用 以 指定 媒体 类 型 ， 然 后 根据 媒体 类 型 来 选择 应 该 使 用 的 样式 。 换 句 话说 ， 人 允许 我 们 在 不 改变 内 容 的 情况 下 
在 样式 中 选择 一 种 页 面 的 布局 以 精确 地 适应 不 同 的 设备 ， 从 而 改善 用 户 体验 。 


接 下 来 ， 我 们 看 看 在 CSS 3 中 如 何 使 用 Media Queries 模 块 中 的 有 关 功 能 来 根据 浏览 器 的 窗口 尺寸 选择 使 用 不 同 的 样式 。 我 们 知道 ， 在 不 同 的 设备 中 ， 浏 览 器 的 窗口 尺寸 可 能 是 不 同 的 。 如 果 只 针对 某 种 
窗口 尺寸 来 制作 网 页 ， 在 其 他 设备 中 呈现 该 网 页 时 就 会 产生 很 多 问题 ; 如 果 针 对 不 同 的 窗口 尺寸 制作 不 同 的 网 页 ， 则 要 制作 的 网 页 就 会 太 多 。 


为 了 解决 这 个 问题 ，CSS 3 中 单独 增加 了 Media Queries 模 块 ， 使 用 这 个 模块 ， 网 页 制作 者 只 需要 针对 不 同 的 浏览 器 窗口 尺寸 来 编写 不 同 的 样式 ， 然 后 让 浏览 器 根据 不 同 的 窗口 尺寸 来 选择 使 用 不 同 的 样 
式 即 可 。 


到 目前 为 止 ，Media Queries 模 块 得 到 了 Firefox 浏 览 器 、Safari 浏 览 器 、Chrome 浏 览 器 以 及 Opera 浏 览 器 的 支持 。 


代码 清单 27-1 是 一 个 根据 不 同 的 窗口 尺寸 来 选择 使 用 不 同样 式 的 示例 ， 该 示例 中 有 3 个 div 元 素 ， 当 浏览 器 的 窗口 尺寸 不 同时 ， 页 面 会 根据 当前 窗口 的 大 小 选择 使 用 不 同 的 样式 。 当 窗口 宽度 在 1000px 以 
上 时 ， 将 3 个 div 元 素 分 为 三 栏 并 列 显示 ; 当 窗 口 宽 度 在 640px 以 上 、999px 以 下 时 ，3 个 div 元 素 分 两 栏 显示 ; 当 窗 口 宽度 在 639px 以 下 时 ，3 个 div 元 素 从 上 往 下 排列 显示 。 


代码 清单 27-1 根据 不 同 的 窗口 尺寸 来 选择 使 用 不 同样 式 的 示例 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title> 根 据 不 同 的 窗口 尺寸 来 选择 使 用 不 同 的 样式 的 示例 </title> 

<style type="text/css"> 

body( 


margin: 20рх 0; 
} 
#container( 
width: 960px; 
margin: auto; 


} 


#wrapper ( 
width: 740px; 
float: left; 

} 

рі 


line-height: 600рх; 
text-align: center; 
font-weight: bold; 
font-size: 2em; 
margin: 0 0 20px 0; 
} 
#main( 
width: 520px; 
float: right; 
background: yellow; /* 黄色 */ 


} 
#sub01{ 
width: 200px; 
float: left; 
background: orange; /* #6 */ 


} 
#sub02{ 
width: 200px; 
float: right; 
background: green; /* 绿色 */ 


} 
/* 窗口 宽度 在 1000px 以 上 */ 
@media screen and (min-width: 1000px) 
/* 3 栏 显示 */ 
#container( 
width: 1000рх; 
} 


#wrapper{ 
width: 780px; 
float: left; 
} 
#main{ 
width: 560px; 
float: right; 
) 
#sub01( 
width: 200px; 
float: left; 
#sub02 ( 
width: 200px; 
float: right; 


} 
/* 窗口 宽度 在 640px 以 上 、999px 以 下 */ 


@media screen and (min-width: 640px) and (max-width: 999px) 


/* 2 栏 显示 */ 
#container{ 
width: 640px; 


} 
#wrapper ( 
width: 640px; 
float: none; 
) 
р{ 
line-height: 400рх; 
} 
#main{ 
width: 420px; 
float: right; 
} 
#50001 { 
width: 200рх; 
float: left; 
} 
#50002 ( 


width: 100%; 

float: none; 

clear: both; 

line-height: 150px; 
} 


} 
/* 窗口 宽度 在 639px 以 下 */ 
@media screen and (max-width: 639px) { 
/* 1 栏 显示 */ 
#container{ 
width: 100%; 


} 
#wrapper{ 
width: 100%; 
float: none; 
} 
body( 
margin: 20px; 
1 
pt 
line-height: 300px; 
} 
#main{ 
width: 100%; 
float: none; 
} 
#sub01( 
width: 100%; 
float: none; 
line-height: 100px; 
} 
#sub02{ 
width: 100%; 
float: none; 
line-height: 100px; 
} 
} 
</style> 
</head> 
<body> 


<div id="container"> 
<div id="wrapper"> 
<p id="main"> 
MAIN 

</p> 

<р id="sub01"> 
SUB 01 

</p> 

</div> 

<p id="sub02"> 
SUB 02 

</p> 

</div> 

</body> 

</html> 


代码 清单 27-1 的 运行 结果 分 为 如 下 3 种 情况 : 


- 当 窗 口 宽 度 在 1000px 以 上 时 ， 将 3 个 div 元 素 分 为 


栏 并 列 显示 ， 如 


图 27-1 所 示 。 
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图 27-1 窗口 宽度 在 1000px 以 上 时 的 页 面 显示 


当 窗 口 宽度 在 640px 以 上 、999px 以 下 时 ，3 个 div 元 素 分 两 栏 显 示 ， 如 图 27-2 所 示 。 


- 当 窗 口 宽度 在 639px 以 下 时 ，3 个 div 元 素 从 上 往 下 排列 显示 ， 如 图 27-3 所 示 。 
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272 窗口 宽度 在 640px 以 上 、999px 以 下 时 的 页 面 显示 
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27-3 窗口 宽度 在 639px 以 下 时 的 页 面 显 示 


27.2 在 iPhone 中 的 显示 


在 iPhone 3GS 和 iPod touch 中 使 用 的 Safari 浏 览 器 也 对 CSS 3 的 媒体 查询 表达 式 提供 了 支持 。iPhone 的 分 辨 率 是 320pxx480px， 所 以 ， 如 果 运 行 代码 清单 27-1 中 的 示例 ， 示 例 页 面 中 的 3 个 div 元 素 本 
来 应 该 是 从 上 往 下 排列 显示 的 ， 但 是 真正 运行 的 时 候 ， 浏 览 器 中 显示 结果 却 为 两 栏 显示 ， 如 图 27-4 所 示 。 


为 什么 会 是 这 样 》 因 为 在 iPhone 中 使 用 的 Safari 浏 览 器 在 进行 页 面 显示 时 是 将 窗口 宽度 作为 980px 进 行 显示 的 。 因 为 现在 的 网 页 大 多 是 按照 宽度 为 800px 左 右 的 标准 进行 制作 的 ， 所 以 Safari 浏 览 器 如 果 
按照 980px 的 宽度 来 显示 ， 就 可 以 正常 显示 绝 大 多 数 的 网 页 了 。 


所 以 ， 即 使 在 页 面 中 已 经 写 好 了 页 面 在 小 尺寸 窗口 中 运行 时 的 样式 ，iPhone 中 的 Safari 浏 览 器 也 不 会 使 用 这 个 样式 ， 而 是 选择 窗口 宽度 为 980px 时 所 使 用 的 样式 。 在 这 种 情况 下 ， 可 以 利用 <meta> 标 
签 在 页 面 中 指定 Safari 浏览 器 在 处 理 本 页 面 时 按照 多 少 像素 的 窗口 宽度 来 进行 ， 指 定 方法 类 似 如 下 所 示 : 


<meta name="viewport" content="width=600px" /> 


在 代码 清单 27-1 中 加 入 这 段 代码 ， 并 且 在 iPhone 中 重新 运行 该 示例 ，Safari 浏 览 器 将 窗口 宽度 作为 600px 来 处 理 ， 将 3 个 div 元 素 从 上 往 下 并 排 显示 ， 如 图 27-5 所 示 。 


图 27-4 ”在 iPhone 浏览 器 中 运行 代码 清单 27-1 中 的 示例 


图 27-5 iPhone 中 的 Safari 浏 览 器 将 窗口 宽度 作为 600px 来 处 理 


因此 ， 如 果 在 页 面 中 已 经 准备 好 了 在 小 尺寸 的 窗口 中 使 用 的 样式 ， 并 且 有 可 能 在 iPhone 或 iPod touch 中 被 打开 时 ， 请 不 要 忘 了 加 入 <meta> 标 签 并 在 标签 中 写 入 指定 的 窗口 宽度 。 


27.33 Media Queries 的 使 用 方法 


在 代码 清单 27-1 中 ， 我 们 使 用 Media Queries 来 根据 3 种 不 同 


3 种 不 同 的 样式 ， 具 体 来 说 ，Media Queries 的 使 用 方法 如 下 所 示 : 


@media 设备 类 型 and (设备 特性 ) {样式 代码 } 


在 代码 的 开头 必须 要 书写 “@media”， 然 后 指定 设备 类 型 ， 也 可 以 称 之 为 媒体 类 型 。CSS 2.1 中 定义 了 10 种 设备 类 型 ， 在 此 处 可 以 指定 的 值 与 该 值 所 代表 的 设备 类 型 如 表 27-1 所 示 。 


可 以 指定 的 值 
all 
screen 
print 
handheld 
tv 
speech 
braille 
embossed 
projection 


tty 


设备 特性 的 书写 方式 与 样式 的 书写 方式 很 相似 ， 分 为 两 个 部 分 ， 当 中 由 冒 


的 样式 ， 书 写 方法 如 下 所 示 : 


(min-width: 400px) 


在 Media Queties 中 可 以 指定 的 值 与 该 值 所 代表 的 设备 类 型 


设备 类 型 
所 有 设备 
На ПА 
打印 用 纸 或 打印 预览 视图 
便携 设备 
电视 机 类 型 的 设备 
语音 和 音频 合成 器 
育 人 用 点 字 法 触觉 回馈 设备 
盲文 打印 机 
各 种 投影 设备 
使 用 固定 密度 字母 袖 格 的 媒介 ， 比 如 电 传 打字 机 和 终端 


号 分 割 ， 冒 号 前 书写 设备 的 某 种 特性 ， 冒 号 后 书写 该 特性 的 具体 值 。 例 如 ， 如 果 需 要 指定 浏览 器 的 窗口 宽度 大 于 400px 时 所 使 


CSs 中 的 设备 特性 共有 13 种 ， 是 一 个 类 似 于 CSS 属 性 的 


符 。 


对 于 这 13 种 设备 特性 的 说 明 如 表 27-2 所 示 。 


属性 不 同 的 是 ， 大 部 分 设备 特性 的 指定 值 接受 min/max 的 前 缀 ， 用 来 表示 大 于 等 于 或 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 < 和 > 这 些 字 


表 27-2 ”13 种 设备 特性 的 说 明 


特 性 可 指定 值 ЖЕНЕН 特性 说 明 


min/max 前 组 


же ТА: ару 二 
ИҢ {ш 度数 值 介 许 浏览 器 窗口 的 宽 
例如 : 400px 
带 单 位 的 长 度数 值 
例如 : 200px 
带 单位 的 长 度数 值 
例如 : 400px 
带 单位 的 长 度数 值 
例如 : 200px 


height 浏览 器 窗口 的 高 度 


device-width 


device-height 


DI wa йт Йй I HITT Ip] e A ГАЈИ e Bs [п] 
当 窗口 的 高 度 值 大 于 等 于 宽度 值 时 ， 
дЫ 为 portrait, 17/1] Уу landscape 


只 能 指定 两 个 值 : 


portrait 或 landscape 


orientation 


| 比例 值 А 浏览 器 窗口 的 纵横 比 ， 比 例 值 为 浏览 
ашы 例如 16/9 I ня 口 的 宽度 值 /高 度 值 
UN 比 例 值 辨 率 的 纵横 比 ， 比 例 值 为 设备 
例如 16/9 шан, 宽度 值 /高 度 值 
ета 备 使 用 多 少 位 的 颜色 值 ， 如 果 不 是 
кеша, ГУ 
color-index 整数 值 Е 色彩 表 中 的 色彩 数 
monochrome 整数 值 VF 单 色 帧 缓冲 器 中 每 像素 的 字 节 数 
resolution 分 辩 率 值 ， 璧 如 300dpi 许 设备 的 分 辩 率 
只 能 指定 两 个 值 ， 电视 机 类 型 设 Á Н 2 | 
ѕсап s sS progressive 1 75 1% íf HJ ți, interlace 
progressive 或 interlace 表示 隔行 扫描 
ai 只 能 指定 两 个 值 : 0 或 1 设备 是 基于 栅 格 还 是 基于 位 图 。 


基于 栅 格 时 该 值 为 1， 否则 该 值 为 0 


使 用 and 关 键 字 来 指定 当 某 种 设备 类 型 的 某 种 特性 的 值 满足 某 个 条 件 时 所 使 用 的 样式 ， 壁 如 以 下 语句 指定 了 当 设 备 窗口 宽度 小 于 640px 时 所 使 用 的 样式 : 


@media screen and (max-width: 639px) {样式 代码 } 


可 以 使 用 多 条 语句 来 将 同一 个 样式 应 用 于 不 同 的 设备 类 型 和 设备 特性 中 ， 指 定 方式 类 似 如 下 所 示 : 


@media handheld and (min-width:360px),screen and (min-width:480px) {样式 代码 } 


可 以 在 表达 式 中 加 上 not 关 键 字 或 only 关 键 字 ，not 关 键 字 表示 对 后 面 的 表达 式 执行 取 反 操作 ， 书 写 方法 类 似 如 下 所 示 : 


/* 对 not 后 面 的 语句 执行 取 反 操作 样 шр i ае 设备 之 外 的 其 他 设备 或 非 彩色 便携 设备 中 */ 
@media not handheld and (color) {样式 代 
// 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 


@media all and (not color) 


only 关 键 字 的 作用 是 ， 让 那些 不 支持 Media Queries 但 是 能 够 读 取 Media Type 的 设备 的 浏览 器 将 表达 式 中 的 样式 隐藏 起 来 。 例 如 ， 对 于 如 下 的 语句 来 说 : 


@media only screen and (color) { 样 式 代码 } 


对 于 支持 Media Queries 的 设备 来 说 ， 将 能 够 正确 地 应 用 样式 ， 就 仿佛 only 不 存在 一 样 。 对 于 不 支持 Media Queries 但 能 够 读 取 Media Type 的 设备 (ПЕ 8 只 支持 “@media screen” ) 来 说 ， 由 于 
先 读 取 到 的 是 only 而 不 是 screen ， 将 忽略 这 个 样式 。 


对 于 不 支持 Media Queries 的 浏览 器 (ЖАПШЕ 8 之 前 的 浏览 器 ) 来 说 ， 无 论 是否 有 only， 都 将 忽略 这 个 样式 。 


最 后 要 说 的 是 ，CSS 3 中 的 Media Queries 模 块 中 也 支持 对 外 部 样式 表 的 引用 ， 使 用 方法 类 似 如 下 所 示 : 


@import url (color.css) screen and (min-width: 1000рх); 
<link rel=" stylesheet" type="text/css" media="screen and (min-width: 1000px)" 
href="style.css" /> 


第 28 章 CSS 3 的 其 他 重要 样式 和 属性 


本 章 将 对 CSS 3 中 的 一 些 内 容 比较 少 但 非常 重要 的 样式 和 属性 进行 详细 介绍 。 


学 习 内 容 
© 掌握 CSS 3 中 与 颜色 相关 的 样式 ， 掌 握 alpha 通 道 的 使 用 方法 ， 掌 握 CSS 3 中 新 增 的 RGBA 颜 色 、HSIL 颜 色 与 HSLA 颜 色 的 概念 以 及 使 用 方法 。 


. 掌握 opacity 属 性 的 含义 和 使 用 方法 ， 了 解 使 用 alpha 来 指定 透明 度 与 使 用 opacity 属 性 来 指定 透明 度 之 间 的 区 别 ， 掌 握 transparent 颜 色 值 的 含义 及 其 使 用 方法 。 


拭 outline 属 性 的 含义 及 其 使 用 方法 ， 能 够 使 用 outline 属 性 在 元 素 周围 绘制 一 条 轮廓 线 并 指定 该 轮 廊 线 的 线 宽 、 颜 色 、 线 的 样式 以 及 线 与 边框 的 位 移 距离 。 


+ 


- 掌握 resize 属 性 的 含义 及 其 使 用 方法 ， 能 够 使 用 tesize 属 性 来 定义 一 个 允许 用 户 自己 调节 尺寸 的 元 素 。 


握 initial 属 性 值 的 含义 及 其 使 用 方法 ， 能 够 使 用 initial 属 性 来 取消 对 元 素 的 样式 设 定 。 


+ 


握 什 么 是 滤 镜 特效 以 及 怎样 实现 CSS 3 中 的 滤 镜 特效 。 
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281 ”颜色 相关 样式 


在 CSS 3 之 前 ， 在 样式 中 指定 的 颜色 值 只 能 为 RGB 颜 色 值 ， 并 且 只 能 通过 opacity 属 性 来 设置 元 素 的 透明 度 。CSS 3 中 增加 了 3 种 颜色 值 一 一 RGBA 颜 色 值 、HSL 颜 色 值 以 及 HSLA 颜 色 值 ， 并 且 人 允许 通过 对 
RGBA 颜 色 值 和 HSLA 颜 色 值 设 定 alpha 通 道 的 方法 来 更 加 容易 地 实现 将 半 透 明文 字 与 图 像 互 相 重 赤 的 效果 。 


本 节 将 对 CSS 3 中 与 颜色 相关 的 样式 进行 详细 介绍 。 


282 ”用 户 界面 相关 样式 


在 CSS 3 的 基本 用 户 界面 模块 (Basic User Interface Module) 中 定义 了 很 多 为 了 提高 用 户 体验 而 新 增 的 属性 和 功能 ， 本 节 将 对 这 些 新 增 的 属性 和 功能 做 一 个 详细 介绍 。 


28.3 ”使 用 initial 属 性 值 取 消 对 元 素 的 样式 指定 


在 CSS 3 中 ， 可 以 利用 initial 属 性 值 取消 对 元 素 的 样式 指定 。 目 前 Firefox、Safari 和 Chrome 等 浏览 器 对 initial 属 性 值 提供 支持 。 


284 ”实现 CSS 3 中 的 滤 镜 特效 


28.4.1 ” 滤 镜 特效 概述 


[R] 


滤 镜 特效 是 指 在 页 面 被 泻 染 之 后 在 页 面 中 某 个 局 部 呈现 的 一 些 特殊 的 视觉 效果 。 滤 镜 特效 来 源 于 SVG (Scalable Vector Graphics， 可 缩放 矢量 图 形 ) 标准 。 在 SVG 标准 中 ， 滤 镜 特效 被 用 于 对 一 个 矢 
量 图 形 图 像 应 用 一 些 基于 像素 的 图 像 特效 。 后 来 ， 随 着 各 浏览 器 供应 商 在 自己 的 浏览 器 中 实现 这 种 滤 镜 特效 的 同时 ， 渡 镜 特效 的 作用 开始 被 扩大 。M ozilla 组 织 最 早 将 这 种 滤 镜 特效 实现 在 CSS 样 式 代码 中 ， 
他 们 首先 研究 出 一 个 在 CSs 样 式 代码 中 实现 滤 镜 特效 的 方法 ， 从 而 诞生 了 CSS 滤 镜 特效 。 


虽然 滤 镜 起 源 于 SVG， 但 是 在 SVG 与 CSS 3 中 使 用 不 同 的 方式 来 定义 和 使 用 滤 镜 。 在 SVG 中 ， 使 用 一 个 内 置 各 种 滤 镜 特效 的 元 素来 实现 滤 镜 特效 ， 在 CSS 3 中 ， 使 用 一 个 图 形 模型 来 定义 滤 镜 ， 开 发 者 可 
直接 使 用 样式 代码 来 实现 滤 镜 。 


CSS 滤 镜 的 设计 者 已 尽 最 大 努力 来 使 Web 开 发 者 更 方便 地 使 用 滤 镜 ， 所 以 本 书 中 只 介绍 如 何在 CSs 样 式 代码 中 直接 使 用 滤 镜 ， 而 不 介绍 如 何在 SVG 中 使 用 滤 镜 。 


目前 Firefox 12, Chrome 10, Opera 12 以 及 Safari 6 以 上 版 本 浏览 器 均 支持 CSS 3 中 滤 镜 特效 的 实现 。 


第 29 章 ”综合 实例 


本 章 是 全 书 的 结尾 部 分 ， 主 要 是 想 通过 两 个 综合 实例 来 帮助 读者 更 好 地 理解 全 书 的 内 容 ， 帮 助 读者 从 总 体 上 掌握 应 该 如 何 综合 运用 HTML 5 以 及 CSS 3 来 创建 一 个 具有 现代 风格 的 Web 网 站 和 Web 应 用 
程序 。 


“ 如 何 使 用 HTML 5 中 新 增 的 结构 元 素来 构建 一 个 结构 更 清晰 、 更 具有 语义 和 现代 风格 的 Web 网 站 。 


“ 如 何 使 用 “HTML 5+CSS 3+ 本 地 数据 库 ” 来 构建 一 个 现代 Web 应 用 程序 。 


29.1 实例 1: 使 用 HTML 5 中 新 增 结构 元 素来 构建 网 页 


HTML 5 中 新 增 了 几 个 结构 元 素 (section 元 素 、article 元 素 、nav 元 素 、aside 元 素 、header 元 素 和 footer 元 素 ) ， 通 过 运用 这 些 结构 元 素 ， 可 以 让 网 页 的 整体 结构 更 加 直观 和 明确 、 更 加 富有 语义 化 和 


更 具有 现代 风格 。 


本 节 将 以 一 个 企业 网 站 为 实例 来 讲解 如 何 综合 运用 HTML 5 中 的 这 些 结构 元 素 、 页 面 中 每 个 结构 元 素 应 该 起 的 作用 ， 以 及 应 该 展现 哪些 内 容 。 


进行 讲解 ， 以 便 让 读者 同时 了 解 在 用 HTML 5 实现 的 网 页 中 应 该 如 何 使 用 CSS 3 样式 来 对 页 面 中 的 元 素 进行 页 面 布局 以 及 视觉 美化 。 


29.2 ”实例 2: 使 用 HTML 5+CSS 3 来 构建 Web 应 用 程序 


这 里 会 将 实现 页 面 的 HTML 5 代码 与 CSS 3 的 样式 代码 一 起 


上 一 节 讲述 了 如 何 将 HTML 5 中 新 增 结构 元 素 与 CSS 3 样式 结合 在 一 起 来 创建 一 个 结构 更 加 清晰 、 更 加 具有 语义 化 、 更 加 具有 现代 风格 的 网 站 。 本 节 将 结合 Web 应 用 程序 中 的 一 个 示例 页 面 来 向 读者 介绍 


在 下 一 代 Web 应 用 程序 的 页 面 中 应 该 如 何 使 用 HTML 5 中 新 增 的 表单 元 素 和 其 他 功能 以 及 CSS 3 的 样式 。 


本 节 介绍 的 示例 页 面 是 在 Web 应 用 程序 中 经 常会 使 用 的 信息 输入 页 面 ， 该 页 面 分 为 上 下 两 部 分 ， 在 页 面 的 上 半 部 分 的 表单 中 输入 信息 ， 点 击 表单 中 的 “保存 ”按钮 后 在 下 半 部 分 的 一 览 表 中 显示 所 有 信 


息 ， 包 括 刚才 输入 的 这 条 信息 。 


程序 的 Demo 版 来 说 ， 这 也 将 是 一 个 不 错 的 选择 。 现 在 很 多 Demo 版 的 Web 应 用 程序 都 是 使 用 直接 将 数据 写 死 在 页 面 中 的 办 法 来 演示 对 数据 的 操作 流程 。 如 果 使 


具有 实时 特征 。 该 页 面 在 Chrome 浏 览 器 中 的 运行 结果 如 图 29-13 所 示 。 


D 订单 信息 


首先 ， 我 们 来 看 一 下 该 页 面 在 浏览 器 中 的 页 面 显 示 结果 。 为 了 能 够 同时 讲解 HTML 5 对 本 地 数据 库 进 行 操作 的 功能 ， 本 示例 中 将 数据 全 部 保存 在 本 地 IndexedDB 数 据 库 中 。 对 HTML 5 时 代 的 Web 应 用 


本 地 数据 库 ，Demo 版 中 的 数据 将 会 更 加 


> С Dfile:///H:/back/HTML5CSS3/ 已 定 / 第 3 版 /代码 清单 /第 29 章 / 
C 


章 /代码 清单 29-5.html 7. 


ml Ru Hun mms Т жини Т ашк инш: mau. вале 


— 2015-05-04 goods0000001 春兰 810 
00000002 2015-05-04 goods0000002 长 虹 49 1500 
00000003 2015-05-04 zoods0000004 海尔 715 


图 29-13 ”订单 信息 输入 页 面 
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附录 A 截至 2015 年 5 月 五 大 浏览 器 最 新 版 对 HTML 5 的 支持 情况 


表 A-1 对 表单 元 素 的 支持 〈VW 表示 支持 ，X 表 示 不 支持 ) 


zhangsan@126. com 
lisi@qq. com 
wangwu@aliyun. com 


input type-date х 
input type=month x 
input type=datetime-local x 
нө 外 | 具有 特殊 外 | 具有 特殊 外 
具有 特殊 外 | 观 ( 即 当 鼠标 | 观 ( 即 当 鼠 标 | 观 ( 即 当 手指 
观 ШЕЛ МЕ 指 动 到 输 | 指针 移动 到 输 单 击 输 入 框 时 不 具有 特殊 
劳 边 附带 可 上 A HE 上 时 输入 | 入 框 上 时 输入 输入 框 劳 边 N 外 观 ， 具 备 输 
input type=number 下 调节 数 Ш 的 HEJ 显示 可 КЕЛ л 可 Л; 可 ! -下 调节 入 数值 的 有 效 
按钮 )， 支 持 输 | 上 下 调节 数值 | 上 下 调节 数值 | 数值 的 按钮 )， 性 验证 功能 
入 数值 的 有 效 | 的 按钮 )， 支 持 | НЗ ШО), wJ | 支持 输入 数值 
性 验证 功能 输入 数值 的 有 | 输入 数值 的 有 | 的 有 效 性 验证 
效 性 验证 功能 | 效 性 验证 功能 | 功能 
input type=color х 
(2%) 
: _ с ЕЁ с. 
Баа У 
Select JÚ HS required / V 
label л 417 controls 属性 x 
input type=text JÚ 素 与 textarea 
JÚ # IJ selectionDirection 属性 Š x 
input type=image 元 # 的 width | ; 
属性 与 height 属性 V y 
textarea JÚ # lJ maxlength 属性 — у 
textarea ERAY wapite | у | v | v | v | у 
output х 
progress у V у у у 


ЖА2 对 其 他 元 素 的 支持 (表示 支持 ，X 表 示 不 支持 ) 


新 增 结 构 元 素 V V 
figure 元 素 V N 
figcaption 22 V \ 
mark Jú £ V \, 
time JÉ £ x х 
details Ж V x 
summary JÚ £ V `V 
dialog JÚ £ x х 
menu JÚ Ж \ V 


ЖАЗ 对 表单 属性 的 支持 (表示 支持 ，X 表 示 不 支持 ) 


属 性 Firefox 38.0 Opera 29.0 | Chrome 42.0 Safari 8.0 IE 11.0 
V V V V 


提交 时 验证 的 pattern 属性 


提交 时 验证 的 required 属性 
form 属性 


2 


х 
formaction 属性 V 
formmethod 属性 м 
formenctype 属性 V 
formtarget 属性 V 
formnovalidate 属性 V 
autocomplete 属性 M 
autofocus 属性 V 

( 2) 
属 性 IE 11.0 
placeholder 属性 V 
multiple 属性 V 
labels 属性 x 
CSS 选择 名 V 
属 性 IE 11.0 
iframe JÚ # IJ sandbox 属性 V 
script JÚ Ж ЇЇ) async 属性 与 defer , 

属性 ы 

Base64 编码 与 解码 支持 м 


ЖА-5 IJAPIK ki (VATA, X ROF ЖД) 


属 性 Firefox 38.0 IE 11.0 
canvas JÉ 2 V V V м V 
使 用 ellipse J 1822 ИЙИП x x 
Canvas 2D API v v 
WebGL 3D API У v 
MPEG ASP ЙУ : 
H-264 支持 м м V V V 
Ogg Theora 支持 V x x 
мам 20 V V 
мз ЭЧ! : V 
AAC 支持 x y 
Ogg Vorbis 支持 V x V x x 
WebM with VP8 支持 м x 
WebM with VP9 支持 м x 
нл UE )A9I V V 
拖 放 API V V V у 
СеоІосайоп АРІ м м V 


( 续 ) 


属 性 Firefox 38.0 IE 11.0 
Server-Sent Events API V 5 | x 
XMLHttpRequest ; ; 
扩展 API ki =a k 
WebSocket V М 
FileReader API V V 
FileSystem API х x 
Session Storage V V 
Local Storage V V 
Web SQL Database x x 
IndexedDB м у 
在 IndexedDB 数据 库 中 保存 

Blob 对 象 ki i 
Application Cache V N 
Web Workers V V 
Shared Web Workers V x 
Web Notifications ОШ ЖП) API V x 
Page Visibility API V V 
FullScreen( 全 屏 ) 支持 V V 
鼠标 指针 锁定 API V x 
requestAnimationFrame 方法 V V 
Mutation Observer { V 
JavaScript Promise № x 
Beacon API V x 


